问题描述
我很困惑.我正在尝试通过使用媒体查询来使网站具有响应性.
I am confused. I am trying to make a website responsive by playing around with media queries.
根据大多数来源，例如 this，用于智能手机的 mediq-query 是 max-device-width: 480px 和 min-device-width: 320px.
according to most sources, for example this, the mediq-query to use for smartphones is max-device-width: 480px and min-device-width: 320px.
但是当我使用这些查询时，我的 android 2.x 仍然显示页面的计算机版本".因此，我开始更改查询中的值，并注意到我的手机似乎具有 980 像素的设备宽度..
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..
这是为什么?我真的很想掌握这一点，当然我可以在使用 980 时对它的工作感到满意，但我想知道发生了什么以及为什么?我的意思是我的手机不应该是 980 像素宽或高，这是某种像素密度问题吗?
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?
推荐答案
您可能想尝试使用 max-width 而不是 max-device-width.这很可能是像素密度的问题 - max-device-width 可能报告的是设备像素而不是 CSS 像素.
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.
这是一个测试页面:
要真正了解这一点，您需要阅读 Peter-Paul Koch 的两个视口的故事":
To really get a handle on this, you'll want to read Peter-Paul Koch's "A Tale of Two Viewports":
可能还有他关于为移动设备做 CSS 的建议:
And possibly his recommendation on doing CSS for mobile devices:
这篇关于为什么我的 Android 设备宽度是 980 像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！