Question

我现在已经挣扎了一段时间。

我为一个客户做了一个响应式网站，但事实证明他的平板电脑（松下FZ-A1）有0.75 devicePixelRatio ，这意味着它有1024x768像素，但实际上显示较少。

虽然我觉得很难理解，但是创建设备的重点是什么，他们可以正确显示网页，当他们显然会失败时，我正在努力寻找合适的方法来处理这个问题。

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

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

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

非常感谢任何帮助。甚至一些解释，为什么有人会生产具有<1屏幕像素比率的设备。

更新

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

Answer 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 :(

Answer 2

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

我们使用了元标记

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

这会强制设备以640px的宽度显示您的网站。我接受她的解决方案做了同样的事情，但是用javascript检测设备的显示比例是否实际上小于1，所以对Wizzard赞不绝口，并感谢大家的输入。

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

2 个答案: