Scaling a 768px wide website for windows phone

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

문제

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.

도움이 되었습니까?

해결책

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top