Question

在我的系绳结束时用这个。

我的网站：timjstevenson.com

渲染除Windows手机以外的所有内容。没有错误。

我正在使用推荐的头部功能

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);
}

推荐的视口元素

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

推荐的CSS元素

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

但该网站仍然以完整尺寸呈现，并且未正确处理固定/相对元素。

我对此做了很多研究并阅读了所有相关的博客/论坛。

我的CSS顶部看起来像这样......

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;}

html的顶部看起来像这样......

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

我读过这些但没有运气......

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

重要编辑：问题似乎与位置：固定DIV有关。这些DIV元素不能在Windows Phone IE下扩展。

Answer 1

解决。

问题在于位置固定DIV具有指定的宽度（以像素为单位）。

如果视口由媒体查询（特别是WinPhone 7/8）控制，那么指定宽度大于固定div中的屏幕宽度会导致问题。

这是我改变的CSS的开始 - 请注意div.header和div.site条目。没有指定的宽度 - 只有100％从身体继承而且最大宽度被投入。

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;}

以下是我使用的媒体和视口元素。

@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}

这是html中的head viewport元标记

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

希望这有帮助。

吨。

为Windows手机扩展768px宽的网站

1 个答案: