Menu
I am confused. I am trying to make a website responsive by playing around with media queries.
according to most sources, for example this, the mediq-query to use for smartphones is max-device-width: 480px and min-device-width: 320px.
But when i use these queries, my android 2.x does still show the "computer version" of the page. So i started changing the values on the query and noticed that my phone seems to have the device-width of 980px..
Why is that? I really want to get a grip of this, sure i could just be happy with it working when using 980 but I want to know what is going on and why? I mean my phone isn't supposed to be 980px wide or high for that matter, is it some kind of pixel density problem?
477
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.
The ViewPort defines a FOV which is used by CameraX to calculate output crop rects. For use cases associated with the same ViewPort in a UseCaseGroup , the output crop rect will be mapped to the same camera sensor area.
The viewport is the area in which your web page is drawn. Although the viewport's total visible area matches the size of the screen when zoomed all the way out, the viewport has its own pixel dimensions that it makes available to a web page.
I know this question is old but for future people who look at this, this is most likely caused because the OP hasn't set the proper meta tag. Add this to the header.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You might want to try using max-width instead of max-device-width. It could well be a pixel-density thing - max-device-width might be reporting device pixels instead of CSS pixels.
Here's a test page:
To really get a handle on this, you'll want to read Peter-Paul Koch's "A Tale of Two Viewports":
And possibly his recommendation on doing CSS for mobile devices:
35
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
