Android Chrome 大字体错误/缩放错误/元视口设备宽度不起作用答案

【问题标题】：Android Chrome large font bug/zoom bug/meta viewport device-width not workingAndroid Chrome 大字体错误/缩放错误/元视口设备宽度不起作用
【发布时间】：2014-11-01 00:02:32
【问题描述】：

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

在我测试过的所有设备以及我测试过的所有不同移动浏览器上，一切都按预期运行，除了一个：Android (Nexus 7) 上的 Chrome (v38.x)

基本上，正在发生的事情似乎是一切都被放大/放大了，这让网站布局看起来很荒谬。

我正在使用元视口标签和基于 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 浏览器上的显示截图。

这看起来很古怪，为什么会这样？

另外，如果我在此页面上提醒窗口的 innerWidth，我会得到 121 像素而不是 980 像素。

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

【问题讨论】：

标签： android css google-chrome

【解决方案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;" />

希望一切在其他浏览器中仍能正常工作。如果没有，我会回来报告！

【讨论】：

【解决方案2】：

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

【讨论】：