我正在尝试使用 Chocolate Chip UI 创建一个简单的跨平台移动 UI，但在使用 Windows Phone 8 模拟器上的 CSS 时遇到了问题。
根据 http://chocolatechip-ui.com/documentation#/building 上的文档使用 Gulp 下载并构建 Chocolate Chip UI 之后，我只使用构建的输出文件创建了一个简单的站点。这是我的文件/文件夹结构...
我的index.html文件如下...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.win-3.0.4.min.css" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.5.2.min.js"></script>
<title>Hello World</title>
</head>
<body>
<nav class='current'>
<h1>Mobile App</h1>
</nav>
<article id='main' class='current'>
<section>
<ul class='list'>
<li class='nav' data-goto='upload-document'>
<h3>Upload Document</h3>
<h4>Use pictures to make a doc</h4>
</li>
</ul>
</section>
</article>
<nav class='next'>
<a href="#" class="button back">Mobile App</a>
<h1>Upload Document</h1>
</nav>
<article id='upload-document' class='next'>
<section>
</section>
</article>
</body>
</html>当我在 Internet Explorer 11 中本地打开网站时，使用 Windows Phone 8 用户代理，一切看起来(和工作)都很好...
但是，当我在 Visual Studio 2013 Premium 附带的 Windows Phone 8 模拟器中浏览同一站点时，我注意到字体看起来更大，并且后退按钮呈现为宽度是高度的两倍。屏幕转换仍然有效，但 CSS 似乎有误..
为什么会发生这种情况？模拟器呈现的结果是否与真正的 Windows Phone 不同(我没有可测试的物理设备)？ ChUI CSS 有问题吗？还是我遗漏了其他问题？
更新---------------------
经过进一步检查，这也发生在手机上，并且仅当模拟器(或手机)处于纵向模式时。这是横向模式下模拟器的屏幕截图...
最佳答案
我报告了这个问题，它已在 Issue #48 中修复.
关于css - Windows Phone 8 上的 Chocolate Chip UI CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21807695/