Android 网站：如何处理低 devicePixelRatio 设备：平板电脑、智能手机等？答案

【问题标题】：Website for Android: what to do with low devicePixelRatio devices: tablets, smartphones, etc.?Android 网站：如何处理低 devicePixelRatio 设备：平板电脑、智能手机等？
【发布时间】：2014-04-14 01:22:44
【问题描述】：

我现在为此苦苦挣扎了一段时间。

我为客户做了一个响应式网站，但后来发现他的平板电脑 (Panasonic FZ-A1) 有 0.75 devicePixelRatio，这意味着它说它有 1024x768 像素，但实际上显示较少。

虽然我觉得很难理解，但创建能够正确显示网页的设备有什么意义，但显然它们无法做到这一点，我正在努力寻找正确的方法来处理这个问题。

问题出在： 1px 边框随机出现在元素上。显然，它们不会出现在屏幕上，因为 0.75 像素规模。我的网站是响应式的，但浏览器对屏幕尺寸“撒谎” - 它返回 1024x768，因此 CSS 中的媒体查询工作起来就好像它实际上会那么大。

标题<meta content="width=device-width, initial-scale=1.33" name="viewport"/> 中的元标记不应该是答案，因为它不会影响浏览器对屏幕大小的判断，因此 CSS 响应性将无法正常工作。

我在“设置”中找不到任何关于屏幕像素比的内容。

任何帮助将不胜感激。即使是一些解释，为什么有人会生产具有

更新：

在原生 Android 浏览器中，“特殊”设置下有一个东西，我刚刚发现，它可以工作。它被称为“默认比例”，带有“远”、“正常”和“关闭”选项。选择“关闭”可以解决问题。不过话说回来，Android 4.03 的默认浏览器不支持部分 html5 功能，如果我们能找到更通用的解决方案就好了。

【问题讨论】：

嘿，我在同一个设备上也遇到了同样的问题，你还遇到过其他问题吗？

标签： android css html web

【解决方案1】：

我在使用完全相同的平板电脑时遇到了这个问题，这就是我最终所做的。

我曾尝试在低 dpi 屏幕上使用媒体选择器，然后执行 html { zoom: 120% } 看起来不错，但仍然缺少输入的几个像素。

最后我这样做了，效果很好，基本上它最终将视口的宽度设置为 1024，这是这些硬板的实际原生分辨率。

请注意，我仍然执行 user-scaleable=no，因为我认为这将有助于防止移动设备上的点击延迟。

<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript">
    // Try and show the page nicer if we have a low dpi screen
    if(window.devicePixelRatio < 1.0) {
        var newWidth = Math.floor(screen.width * window.devicePixelRatio);
        var viewportContent = "user-scalable=no, width=" + newWidth;
        document.getElementById('viewport').setAttribute('content', viewportContent);

    }
</script>

我只是希望我不必使用 javascript :(

【讨论】：

【解决方案2】：

我们做了与 Wizzard 提到的完全相同的事情，但使用的是静态方法，因为我们需要我们的解决方案仅与上述设备一起使用。

我们使用了元标记

<meta content="width=640px, user-scalable=no" name="viewport"/>

这会强制设备以 640 像素宽度显示您的网站。我接受她的解决方案做同样的事情，但使用 javascript 检测设备的显示比例是否实际上小于 1，因此向 Wizzard 致敬，并感谢大家的投入。

【讨论】：