android - Android : what to do with low devicePixelRatio devices: tablets, 智能手机等网站？

Question

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

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

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

Here is the problem: 1px borders on elements randomly don't appear. Obviously, they don't appear on screen, because of the 0.75 pixel scale. My site is responsive, but the browser 'lies' about the screen size - it returns 1024x768, so media queries in CSS are working as if it would actually be that big.

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

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

如有任何帮助，我们将不胜感激。甚至一些解释，为什么有人会生产具有 <1 屏幕像素比的设备。

---

更新:

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

Answer 1

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

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

最后我做了这个，效果很好，基本上它最终将视口(viewport)的宽度设置为 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 :(