Question

我正在尝试使用Chocolate Chip UI创建一个简单的跨平台移动UI，并且在Windows Phone 8模拟器上遇到CSS问题。

根据http://chocolatechip-ui.com/documentation#/building的文档使用Gulp下载和构建Chocolate Chip UI后，我仅使用构建中的输出文件创建了一个简单的站点。这是我的文件/文件夹结构...

File/folder structure

我的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用户代理，一切看起来（并且工作正常）......

IE11 with Windows Phone 8 user agent

但是，当我浏览Visual Studio 2013 Premium附带的Windows Phone 8模拟器中的同一站点时，我注意到字体看起来更大，而后退按钮的呈现宽度是它的两倍。屏幕转换仍然有效，但CSS似乎错了..

Windows Phone 8 emulator

为什么会发生这种情况？仿真器是否会呈现与真正的Windows Phone不同的结果（我没有要测试的物理设备）？ ChUI CSS有问题吗？或者是否有其他错误我错过了？

更新---------------------

经过进一步检查，此也会在手机上发生，并且仅在模拟器（或手机）处于纵向模式时才会出现。以下是横向模式中模拟器的屏幕截图...

landscape mode

Answer 1

我报告了此问题，并在Issue #48中修复了此问题。

Windows Phone 8上的Chocolate Chip UI CSS问题

更新---------------------

1 个答案: