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...
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...
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..
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...
I reported this, and it was fixed in Issue #48.