Menu
I'm using the Viewport emulator of Chrome Debug Tools. What I find strange is that regardless of the viewport width Chrome always reports the same width in pixels and neither zoom nor the DeviceToPixelRation (DPR) change. Styles for h1 set width to 100% and there's no other code. I'd expect that either the width or DPR will change when the viewport width changes. Why doesn't it happen?
Here is the code:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
width: 100%;
background: blue
}
</style>
</head>
<body>
<h1>
Some header text here
</h1>
861
Setting The ViewportThe width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
height. Controls the size of the viewport. It can be set to a specific number of pixels like height=400 or to the special value device-height , which is 100vh, or 100% of the viewport height.
You can use the window. innerHeight property to get the viewport height, and the window. innerWidth to get its width.
Here is the quote from here:
To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.
That's why you width doesn't change. Browsers simply scale down the entire web page to fit the screen.
Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels.
That's why it adjusts the width with the name="viewport" tag.
This seems working:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
For more information, read the docs on viewport meta tag at MDN.:
The viewport meta tag tells the browser that the width of the screen should be considered the "Full Width" of the page. Meaning no matter the width of the device you are on, whether on desktop or mobile. The website will follow the width of the device the user is on.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
