Menu
I have a comparatively simple website in terms of HTML and CSS and it looks fine in Desktop browsers (IE9/Chrome). However when I view it in Internet Explorer in Windows Phone 7.5 it seems to make the text inside of unordered lists huge or tiny for some reason,
Here is code that produces weird results
<!DOCTYPE html>
<head>
<style type="text/css">
body {
margin: 0px 0px;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 120%;
}
</style>
</head>
<body>
<h1>H1 header</h1>
<h2>H2 header</h2>
<h3>H3 header</h3>
<p>Some paragraph text</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>
Take a look at the size of the li text, it should be the size of the p tag but it is tiny. For a version of this file online see this link here
I have narrowed it down to the margin property on body and on a div, if either of these are set then the text proportions go crazy. Why does this happen? Is this a bug? I can work around this but it is far more convenient for me to set the margin on a container rather than all children individually
880
Seems that internet Explorer mobile for Windows Phone 7 applies some kind of font-resizing to optimize the content, but this just ends up screwing up my site at least, see this PDF 'Windows Explorer Mobile for Windows Phone 7 which explains briefly.
To stop this behaviour, include this bit of CSS
html {
-ms-text-size-adjust: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With