how does a website automatically know/change if you’re using it on a PC or Phone?
In: 2
Your mobile phone internet browser has what’s called a “user agent” that identifies it to the website. So if it shows a *mobile* user agent, the site displays the mobile version of the site. And you can set it to show the desktop version 100% of the time if you want but that would be painful.
The client (i.e. the browser) can choose to include a bit of extra information in the request it makes to the server, where it identifies what kind of client it is. It tells the server what browser it is, what OS it’s running, etc.
If you’re talking about changing the layout to fit the display however, that’s a bit different. Developers can write a bit of HTML and javascript code to detect the window size, and automatically rearrange/resize the UI accordingly.
There are two ways for a website to change based on whether you are on a PC or a phone.
When you visit a site your browser sends the site a user agent string which string which identifies what browser and version you are using. For example, my user agent string is:
“`
User Agent Mozilla/5.0 (Android 12; Mobile; rv:105.0) Gecko/105.0 Firefox/105.0
“`
By reading this string websites know I am running Android 12 and using Firefox browser version 105. The server can then route me to a mobile site like https://en.m.wikipedia.org/wiki/Main_Page where the .m. indicates a mobile page vs https://en.wikipedia.org/wiki/Main_Page for the same for a desktop visitor.
The other way that pages are modified are through CSS and screen size. The server knows how big your screen is and the CSS (cascading style sheet) gives information based on the size of your screen.
It’s common for the layout for the page like the font sizes, images sizes, and order and position of items to have different values for a phone, a tablet, and a computer monitor. On a computer the navigation buttons might be in the header or on a side bar but on tablet or phone might be in a hamburger menu (three vertical lines), hotdog menu (three vertical dots), or a kebab menu (three horizontal dots) instead. Headings might be 40pixels high or larger on desktop but 18px on a phone.
It doesn’t automatically know, your PC or phone basically tells the website information about you which it then uses to display itself appropriately.
Thank you so much for answering this ELI5. I didn’t know about that!
Latest Answers