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

【问题标题】：Force Mobile browsers to display webpage at its native resolution强制移动浏览器以其原始分辨率显示网页
【发布时间】：2014-09-21 22:45:47
【问题描述】：

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

我对此进行了搜索，发现可以通过对 iPhone 使用设备像素比的 css 媒体查询（例如 @media screen 和 (-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">

谢谢。

【问题讨论】：

标签： html ios css

【解决方案1】：

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

.element {
    width: 100px;
}

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

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

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

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

【讨论】：