shewhomust has drawn your post to my attention. Let's get techy... There is a meta tag, viewport, which controls how things are displayed. On this Dreamwidth page it is <meta name="viewport" content="width=device-width, initial-scale=1.0"/> The width=device-width tells the browser to use the actual width of the screen to render the web page. Without this, a mobile device would probably render the page on a width of around 980px then compress it to fit the screen, combining several pixels together. The other parameter, initial-scale=1.0, tells the browser to render the page so that one pixel on the page equals one pixel on the screen. If you search on meta viewport there's a lot more information out there. This page on the Google site has an example of a web page with and without a viewport tag.
But this relates essentially to displays on smartphones. These very wide devices must be doing something under the covers to scale the pixels with a default initial-scale of less than 1. The benefit of a wide screen must be smoother pictures and text.
Style sheets can contain media queries to render differently on screens of different sizes. You can use this so that the “hamburger” symbol ☰ displays on smaller screens: on larger screens that part of the page has a style of display:hidden
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
(no subject)
Date: 2018-06-11 09:03 am (UTC)There is a meta tag, viewport, which controls how things are displayed. On this Dreamwidth page it is
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The width=device-width tells the browser to use the actual width of the screen to render the web page. Without this, a mobile device would probably render the page on a width of around 980px then compress it to fit the screen, combining several pixels together.
The other parameter, initial-scale=1.0, tells the browser to render the page so that one pixel on the page equals one pixel on the screen.
If you search on meta viewport there's a lot more information out there. This page on the Google site has an example of a web page with and without a viewport tag.
But this relates essentially to displays on smartphones. These very wide devices must be doing something under the covers to scale the pixels with a default initial-scale of less than 1. The benefit of a wide screen must be smoother pictures and text.
Style sheets can contain media queries to render differently on screens of different sizes. You can use this so that the “hamburger” symbol ☰ displays on smaller screens: on larger screens that part of the page has a style of display:hidden
I hope that helps…