how does a website automatically know/change if you’re using it on a PC or Phone?
In: 2
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.
Latest Answers