为windows phone缩放一个768px宽的网站

我的网站：timjstevenson.com

除了windows phone之外的所有内容都呈现。没有错误。

我使用推荐的头功能

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

与建议的检视METAS

<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

重要编辑：该问题似乎与位置：固定的DIVs。这些DIV元素在windows phone IE下不能缩放。

来源

2014-02-18 TJS101

什么是@ -webkit-viewport {width：device-width}用于？如果你想响应查询是@media唯一的屏幕和（最大宽度：640px）{CSS这里} < - 这是直到手机风景模式 –

我从这里开始，并尝试了一切。 http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html。有很多网站致力于解决这个问题，而且似乎没有人真正解决过这个问题。 @ -webkit-viewport元素来自这里... http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ – TJS101

在另一个电话上的响应能力是否有效？如果不是，为什么当媒体查询只能通过css处理它时使用复杂的方式？即使在桌面浏览器调整其不响应的大小。 –

已解决。

问题在于位置固定的DIV具有指定的像素宽度。

如果视正由媒体查询控制（具体而言为WinPhone 7/8）然后指定宽度大于在固定的div屏幕宽度导致该问题。

这是我改变CSS的开始 - 注意div.header和div.site条目。 NO指定的宽度 - 只有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

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

希望这有助于头部视meta标签。

来源

2014-02-23 18:13:18 TJS101

为windows phone缩放一个768px宽的网站

回答

相关问题