Question

我正在构建一个响应式网站，该网站将在具有高像素密度屏幕的iPhone等智能手机上运行。我知道，为了保持易读性，手机浏览器报告的分辨率是实际屏幕分辨率的一半。

我搜索了这一点，发现可以通过使用设备像素比率的css媒体查询（例如@media屏幕和（-webkit-min-device-pixel-ratio：2））来控制此行为。我试着通过将我的整个css代码放在这个块中来使用它，但我的iPhone仍然显示页面，就像它显示它而不使用这个媒体查询。

如何强制iPhone及其他高像素密度手机以实际分辨率显示我的网页？即对于iPhone 5，它应该显示我的网页为640px * 1136px而不是320px * 568px，因为它现在显示。我知道这会让我的文字看起来更小，但我仍然希望像我那样格式化我的网页。

我在HTML中使用以下元代码： -

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

感谢。

Answer 1

如果不更改CSS规则，则将CSS规则放在媒体查询中不会影响浏览器呈现它的方式。你可以尝试这样的事情：

.element {
    width: 100px;
}

@media -webkit-device-min-pixel-ratio: 2 {
    .element {
        width: 200px;
    }
}

基本上，当设备像素比率加倍时，您可以明确地将大小加倍。不幸的是，使用这种技术，您必须使用不同大小的不同媒体查询来处理您必须处理的所有可能像素比率。

否则，您可以使用视口元标记的width属性。如果页面具有固定宽度布局，则可以将其宽度设置为视口宽度。例如，如果您使用960px的“标准”，则可以使用以下元标记：

<meta name="viewport" content="width=960px">