google-chrome - Android 4.4 WebView 和适用于 Android 的 Chrome 浏览器上的 CSS 差异

Question

尝试为 WebApp 实现一种样式。WebView 中的 CSS 属性“line-height”似乎不同。

我以这支笔为例:http://codepen.io/bbredewold/pen/gGbht

代码没什么特别的:

.flip {
  position: relative;
  width: 100px;
  height: 100px;
}

.front {
  width: 100%;
  height: 100%;
  font: 6em arial;
  line-height: 100px;
  text-align: center;
  border: 2px solid #b4b4b4;
}

<div class="flip">
  <div class="front">A</div>
</div>

这是一个错误吗？还是我想念什么？任何想法如何解决这个问题？真是脑残...这些是有差异的图片。图1有问题，图2很好居中...

Answer 1

(我无法评论原始问题，因为我的分数目前太低了)

我意识到这是一个有点老的问题，但这里是:

我最近遇到了类似的问题(Android 6、Chrome 55 等)，我发现 WebView 的一些 Web 设置可以使它解释页面就好像您使用了视口(viewport)元标记

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

为了在 Chrome 中获得相同的结果，我必须插入该视口(viewport)元标记。