Question

对于WP8，我在IE中遇到了一些文本大小的奇怪现象。您可以通过两种方式测试和查看：使用IE11（Win8.1）中内置的WP8模拟器或在WP8中使用IE。

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

该文字只包含<H2>和<P>标签。有一个顶部DIV跨越400px，两个底部DIV向左漂浮，每个跨越200px。

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

如果您在IE11的WP8模拟器或WP8的IE版本中访问该页面，您会发现顶部文本比下部文本大得多。

它应该以这种方式行事吗？是否存在任何人都知道的解决方法？这给我的设计带来了一些实际问题。我尝试过使用相对和绝对字体大小，但没有区别。

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

在WP8上渲染：

Rendering in WP8

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

Rendering on the Desktop

<!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>

Answer 1

看起来添加此<META>标记可以解决问题：

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

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

1 个答案: