Scaling a 768px wide website for windows phone

Question

At the end of my tether with this one.

My website: timjstevenson.com

Renders on everything except windows phone. No errors.

I am using the recommended head function

if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}

And the recommended viewport metas

<meta name="viewport" content = "user-scalable=yes, maximum-scale=1, width=device-width /">

And the recommended CSS elements

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

but the site still renders at full size and doesn't handle the fixed / relative elements properly.

I have done a lot of research on this and read all the relevant blogs / forums.

The top of my CSS looks like this...

html
{-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-font-smoothing:antialiased;}

body
{max-width:768px; min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}

@font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}

@font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}

div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal; 
text-align:justify;
color:#202020;}

div.sitepage
{position:relative;
width:700px;
min-height:900px;
top:180px; 
margin-left: auto;
margin-right: auto;
padding: 5px 10px 5px 10px;
z-index:1;}

And the top of the html looks like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content = "width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon" href="images/tjs_logo.png"/>

And I have read these but no luck...

http://timkadlec.com/2013/01/windows-phone-8-and-device-width/

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

stackoverflow.com/questions/14654425

IMPORTANT EDIT: The issue appears to be with position:fixed DIVs. These DIV elements do not scale under windows phone IE.

What is @-webkit-viewport{width:device-width} for ? if u want responsive the query is @media only screen and (max-width:640px) { CSS Here } <-- this is till phone landscape mode — Hendra Nucleo, Feb 18 '14 at 22:13
I started here and tried everything. http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html . There are a lot of sites dedicated to this problem and none seem to have really solved it. The @-webkit-viewport elements came from here... http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ — TJS101, Feb 18 '14 at 22:17
Is on another phone the responsiveness is work ? if no, why use complex way when media query can handle it via css only ? even in desktop browser resizing its not responsive. — Hendra Nucleo, Feb 18 '14 at 22:18
This site works on every desktop and mobile browser. Except windows phone 8. — TJS101, Feb 18 '14 at 22:19
Did u try using pure media query ? i think its work even in w8 phone. instead of using your @viewport. I just use media query for all my project & no complain so far for responsiveness. — Hendra Nucleo, Feb 18 '14 at 22:21
Can you provide an example of the pure media query? Thank you. — TJS101, Feb 18 '14 at 22:23
Also have been reading this answer - which also does not solve the problem. http://stackoverflow.com/questions/14654425/ . I wish fiddles could render in windows phone 8... — TJS101, Feb 18 '14 at 22:30
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47798/discussion-between-erico-augustin-and-tjs101) — Hendra Nucleo, Feb 18 '14 at 22:31
I can't. I have to go. Let's see if anyone else can crack it... — TJS101, Feb 18 '14 at 22:33

score 0 · Accepted Answer · answered Feb 23 '14 at 18:13

SOLVED.

The problem is with Position Fixed DIVs with a specified width in pixels.

If the viewport is being controlled by media queries (specifically for WinPhone 7/8) then specifying a width greater then the screen width in a fixed div causes the problem.

Here is the start of my altered CSS - note the div.header and div.site entries. NO SPECIFIED WIDTH - just 100% inherited from body with a max-width thrown in.

body
{width:100%;
max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}

@font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}

@font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}

div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal; 
text-align:justify;
color:#202020;}

div.site
{max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;}

div.header
{position:fixed;
z-index:5;}

And Here are the media and viewport elements I used.

@media screen and (max-device-width: 25em)
{body
    {-webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    -text-size-adjust: none;}}

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

And here is the head viewport meta tag in the html

<meta name="viewport" content = "width=device-width, maximum-scale=1.0"/>

Hope this helps.

T.

Scaling a 768px wide website for windows phone

1 Answers1