html - 强制移动浏览器以其原始分辨率显示网页

Question

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

我对此进行了搜索，发现可以通过使用 iPhone 设备像素比的 css 媒体查询(例如 @media screen 和 (-webkit-min-device-pixel-ratio: 2) )来控制此行为。我尝试通过将我的整个 css 代码放在这个 block 中来使用它，但是我的 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;
    }
}

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

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

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