Chocolate Chip UI CSS Issues on Windows Phone 8

StackOverflow https://stackoverflow.com/questions/21807695

Pergunta

I am trying to create a simple cross-platform mobile UI using Chocolate Chip UI, and am having trouble with the CSS on the Windows Phone 8 emulator.

After downloading and building Chocolate Chip UI using Gulp according to the documentation at http://chocolatechip-ui.com/documentation#/building, I created a simple site using only the output files from the build. Here is my file/folder structure...

File/folder structure

My index.html file is as follows...

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

When I open the website locally in Internet Explorer 11, using the Windows Phone 8 user agent, everything looks (and works) fine...

IE11 with Windows Phone 8 user agent

But when I browse to the same site in the Windows Phone 8 emulator that comes with Visual Studio 2013 Premium, I notice that the fonts seem larger, and the back button is rendered as being twice as wide as it is tall. The screen transitions still work, but the CSS seems wrong..

Windows Phone 8 emulator

Why might this be happening? Is the emulator rendering the results differently than a real Windows Phone would (I have no physical device on which to test)? Is something wrong with the ChUI CSS? Or is there something else wrong that I have missed?

Update---------------------

Upon further inspection, this happens on phones as well and only when the emulator (or phone) is held in portrait mode. Here is a screenshot of the emulator in landscape mode...

landscape mode

Foi útil?

Solução

I reported this, and it was fixed in Issue #48.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top