Glossary

Mobile compatible Internet sites

 Extras

 iStripper affiliate  iStripper affiliate

 To the Beginning  |  1  |  2  |  3  |  4  |  5  |  6  |  Towards the End

The most important part about Internet communication is the TCP/IP protocol stack. Almost all current operating systems use the above set of protocols in the same way, and the above works perfectly in the first four layers of the OSI model (Transport Layers). These layers are responsible for media access, access to the destination and the exchange of data. Differences exist in the subsequent layers in charge of the use of data and their presentation on screen of monitor (Application Layers). For example, programs for the exchange of electronic mail, audio and video, and Internet content in web browsers do not have the same way to present information. Web browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones.

A web browser is a software for accessing information on the World Wide Web (WWW). When a user requests a particular website, the web browser retrieves the necessary content from a web server and then displays the resulting web page on the user's device. Core software component of every major web browser is browser engine, also known as a layout engine or rendering engine, or simply an engine analogous to a car concept.

Web pages basically consist of the following parts:

HTML and CSS are not programming languages. They are structure-based markup languages. The basic rules for writing code can be found here. All together is under control by 'web-browser engine'. Many kinds of 'engine' are used over time. Most popular is:

Each Browser must use web-browser engine according to the operating system for which it is intended. At the very beginning of the use of the above components for web site design, even today, each web-browser engine has its 'own opinion' on how the page should be displayed, which is quite a problem in the development of web pages. Even when added to the fact that the content of some site must be legibly displayed on different devices with very different hardware and screen size, the development of the site's pages becomes even more complicated.

 Presentation on screen  Babylon Traffic
Figure 6.1 Rearrange content of page for mobile compatibility.  

Figure 6.1 shows that the view on a large monitor must be rearranged if the same content is to be displayed on a tablet or mobile phone. This means that displaying an image on a large monitor must undergo changes in terms of adjusting the image and text size. In that sense, the solution is to create the same content specifically for mobile devices, or to automatically adjust the content according to the size of the display on the screen to satisfy the display compatibility for different devices. The second approach described is much more complex.

Modern technology has enabled mobile devices to have a very high resolution. However, this does not mean that all content from a large monitor can only be transferred to a mobile device as it would become completely illegible due to little letters. On the other hand, a movie may be displayed at full physical resolution of the monitor, but the size of the subtitles must be adjusted. So there are many different requirements for mobile software support.

According to the above, the physical resolution of the mobile device should be distinguished from the display resolution. The following tables best illustrate this relationship for different mobile technological implementations.

 Fizička i rezolucija prikaza za mobitele
Table* 6.2 Physical resolution and screen resolution of mobile phones and tablets. ( + / - )

The tables show that the very high physical resolution of the cell phone allows for an interpolated and very readable display in a smaller image display resolution, which usually does not exceed 500px on the narrower side of the cell phone (width). The cellphone is generally used upright and width is more important than height.

The following image shows the contents of the page at a resolution of approximately 360px × 690px, although the physical resolution of the cell phone is much higher, and is shown in the upper left corner of the image (JavaScript calculation).

 Display resolution
Figure 3. Display resolution.

Figure 3 shows only the top of the image which is displayed upright on the cellphone. The image size is controlled by a parameter called VIEWPORT. The value of this parameter is in the range 0-1. For a desktop monitor it is 1, but if the monitor is a UHD resolution it can be greater than 1. It is smaller than 1 for cell phones and its size is governed by the help of CSS settings and/or JavaScript. Here's an example of what JavaScript code would look like.

if(window.screen.availWidth<=240)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.209");
document.body.style.fontSize="32px"}
else if(window.screen.availWidth<=320)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.248");
document.body.style.fontSize="31px"}
else if(window.screen.availWidth<=360)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.267");
document.body.style.fontSize="30px"}
else if(window.screen.availWidth<=375)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.277");
document.body.style.fontSize="29px"}
else if(window.screen.availWidth<=414)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.302");
document.body.style.fontSize="28px":}
else if(window.screen.availWidth<=432)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.312");
document.body.style.fontSize="27px":}
else if(window.screen.availWidth<=480)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.340");
document.body.style.fontSize="26px":}
else if(window.screen.availWidth<=512)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.361");
document.body.style.fontSize="25px":}
          :

The script shown is used in this site, it is very simple and regulates the width of the display on the screen, as well as reducing the display size and increasing the basic font for readability. Other parameters are regulated as needed in the CSS settings. Could it have been better? With more self-adjustment? Yes, but this one also satisfies the quite compatibility of this site's pages with respect to mobile devices. If site traffic grows significantly, a more advanced version may be considered. How looks like one of the pages of site on the Android mobile phone 'Samsung Galaxy A40 DS' with different browsers showing the next images. You can see that there are differences in view for different web browsers. The reason is that each of these scripts and CSS settings are interpreted in a different way, and the reason is primarily for the task to be done by the 'web-browser engine'. View on iOS devices with Safari web-browser which using 'WebKit' is similar to the view on Firefox.

 Chrome, Samsung, Edge
Figure*** 6.4 View on Chrome, Samsung, Edge, Opera, Firefox, Dolphin browsers. ( + / - )

Different 'engin', and a very different look of the same page. Same are the only sections of the page that have the default font size in the CSS code, such as titles and menus. Icons and images defined in HTML code are also same. But there is one small caveat regarding this site. All pictures are in .webp format and video is in .webm format. iOS doesn't know what to do with them. In the experience of the author they will never agree. On a desktop computer, the differences between the individual web-browsers regarding the display of the image are not so pronounced, but on mobile devices they are, especially when viewed on different versions of Android OS. The views in Figure 6.4 belong to the 'Pie' version (v9.0). Views on 'Q' (v10.0) are better aligned, but not enough. I leave the reader to judge which 'View' is valid.

This reminded me of outwitting between 'IE' and 'Netscape' decades ago. Each claimed to have the best web-browser in the world. Now there are more 'bests' with features that are unbeatable! Programming for mobile devices, where everyone has their own 'policy' of displaying the image on the screen, is more and more like passing through a 'minefield'.


 Girls  iStripper  iStripper  iStripper  iStripper  iStripper  iStripper


SUMMARY:

Attempts to control Internet content using HTML and CSS settings in such a way that all settings are reduced to zero (or 100%), and that the size of certain types of text is adjusted to the initial (root) value is performed quite well on 'Desktop' computers at all browsers, but this approach does not work at all with mobile browsers, leading to the conclusion that the development of software for mobile devices has not applied sufficient attention. Google 'Chrome' is particularly pathetic. It is a great pity that the HTML code is quite different in version 5.x compared to the tried and stable version 4.01, and the compatibility of the newer version with the old version has not been preserved. This is one of the reasons why the author of this site is not willing to bother with mobile compatible sites, although most of pages can be neatly read on a mobile devices.


 

 Back
 Search
 Next

 To the Beginning  |  1  |  2  |  3  |  4  |  5  |  6  |  Towards the End

  Citing of this page:
Radic, Drago. " IT - Informatics Alphabet " Split-Croatia.
{Date of access}. <https://informatics.buzdo.com/specific/>.
Copyright © by Drago Radic. All rights reserved. | Disclaimer
 

 Mobile - Start
 Mobile devices  Informatics Alphabet