Windows Phone 8 的 IE10 中奇怪的文本大小答案

【问题标题】：Weird text size in IE10 for Windows Phone 8Windows Phone 8 的 IE10 中奇怪的文本大小
【发布时间】：2013-10-09 07:13:23
【问题描述】：

对于 WP8 的 IE 中的文本大小，我感到有些奇怪。有两种方法可以测试和查看：使用 IE11 (Win8.1) 中内置的 WP8 Emulator 或使用 WP8 中的 IE。

要查看问题，请查看此网站：https://dl.dropboxusercontent.com/u/50150377/test.html

文本仅由<H2> 和<P> 标签组成。有一个顶部 DIV 跨度为 400 像素，还有两个底部 DIV 向左浮动，每个跨度为 200 像素。

如果您在任何标准浏览器中访问此页面，您会看到 H2 字体大小是一致的，而其他文本大小是一致的。

如果您在 IE11 的 WP8 Emulator 或 WP8 版本的 IE 中访问该页面，您会注意到顶部的文本比底部的文本大得多。

它应该这样做吗？有没有人知道的解决方法？这给我的设计带来了一些实际问题。我试过使用相对和绝对字体大小，但没有区别。

以下是一些屏幕截图和我正在使用的代码。我已经将代码最小化到几乎没有。任何帮助将不胜感激。谢谢！

在 WP8 上渲染：

在桌面上呈现（IE、FF、Chrome）：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family:arial; }
        .infoBox h2 { font-size:14px; }
        .infoBox p { font-size: 12px; }
    </style>
</head>
<body>
    <div id="main">
        <div class="infoBox" style="width:400px">
            <!-- This text is MUCH larger in IE for WP8 -->

            <h2>THIS IS A TEST</h2>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
        </div>

        <div class="infoBox" style="width:200px;float:left;height:400px;">
            <!-- This text will be smaller in IE for WP8 -->

            <h2>THIS IS A TEST</h2>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
        </div>

        <div class="infoBox" style="width:200px;float:left;height:400px;">
            <!-- This text will also be smaller in IE for WP8 -->

            <h2>THIS IS A TEST</h2>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css internet-explorer windows-phone-8 windows-phone

【解决方案1】：

看起来添加这个<META>标签可以解决问题：

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

【讨论】：

谢谢！谢谢！谢谢！
唯一的事情是我取消了 user-scalable=no。它可以防止用户放大或缩小渲染视图，这是不可取的。
确实，我应该提到这一点。我正在更新我的答案以将其删除...