Question

我在创建移动网站时遇到了困难。

我测试的所有设备以及我测试过的所有不同的移动浏览器都能按预期工作，除了一个：Android上的Chrome（v38.x）（Nexus 7）

基本上，正在发生的事情是，一切似乎都被炸毁/放大，并且它使网站布局看起来很荒谬。

我使用元视口标记和基于em的媒体查询来根据设备显示不同的布局。

以下是一个非常简单的例子：

<head>
    <title></title>
    <meta name="viewport" content="width=device-width;initial-scale=1.0;" />
</head>
<body>
    <div id="top">Font size: 1em</div>
</body>

JSFiddle：http://jsfiddle.net/t6fdb3ak/3/

以下是Android Chrome浏览器显示方式的屏幕截图。

Android Chrome font size bug

这看起来非常古怪，为什么会发生这种情况？

另外，如果我在此页面上提醒窗口的innerWidth，我将获得121px而不是980px。

<script>
    alert(window.innerWidth);
</script>

Answer 1

我在阅读了本页https://developer.chrome.com/multidevice/webview/pixelperfect

的部分内容后解决了这个问题

我从视口元标记中删除了分号，并用逗号替换它们，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1">

以前的表现如下：

<meta name="viewport" content="width=device-width;initial-scale=1.0;" />

希望一切都能在其他浏览器中运行。如果没有，我会报告！

Answer 2

尝试导入bootstrap，他们在视口中有一个构建，如果你使用它，它肯定会起作用。

Android Chrome大字体错误/缩放错误/元视口设备宽度无法正常工作

2 个答案: