正确缩放网站以显示在iphone

我建立了一个移动网站，以适应320px宽。在这个线程（http://stackoverflow.com/questions/4520064/mobile-website-for-iphone-problems）中，它抛出了一段有用的代码，以确保iPhone以正确的分辨率（320宽）显示它。但是，当我旋转手机时，它不会自动重新缩放以适应更宽的视口。正确缩放网站以显示在iphone

关于如何解决这个问题的任何建议？

来源

2012-03-06 Andy

一些非常有用的信息，谢谢。我要通过它来看看它是什么。谢谢。 – Andy 2012-03-06 22:58:43

您可以使用CSS media queries [w3.org]动态调整您的内容的大小。

要检测的时候手机是纵向还是横向，使用orientation，例如：

@media all and (orientation:landscape) { 
    /* apply your css styles here */ 
}

你也可以连接在一起的特定情况下，这取决于你想具体怎么是。举例来说，如果你想要的风格肖像浏览器的400像素的设备宽度，你会做到以下几点：

@media all and (orientation:landscape) and (device-width:400px) { 
    /* apply your css styles here */ 
}

* 应当指出的是，媒体查询应该在你的CSS文件的最后，否则它们将不会正确覆盖现有的样式。

来源

2012-03-06 22:34:37 Moses

对于我的一些移动项目，我一直在使用resize事件的事件监听器。当设备从纵向/横向切换（或桌面窗口调整大小）时，事件将被调用，您可以手动设置元素的高度和宽度。

这里是什么，我一直在使用一个简单的例子：

window.addEventListener('resize', resizetick, false); 
<...> 
function resizetick(e) { 
    if(this.resizet) 
     clearTimeout(this.resizet); 
     resizet = setTimeout(resizecallback, 100); 
} 
<...> 
function resizecallback() { 
    <if new resolution then resize elements here> 
}

中的setTimeout/clearTimeout背后的目的是为了防止多个调整大小。桌面浏览器事件不断发生，而调整大小和移动用户可能会无意中改变其设备的方向。我想避免重复调整内容。

您需要绑定或以其他方式处理resize（）和resizecallback（）。我没有一个方便的剪切和粘贴工作代码的项目 - 抱歉。：\

来源

2012-03-06 22:30:29 tamarintech

很难说出去看网站，但我会采取刺：你明确地说网站的宽度是320px，当你旋转它的时候手机的宽度不是这样的。你的包装应该是width: 100%，这样文档就可以重新调整它自己，或者重新缩放视口。

来源

2012-03-06 22:42:24

正确缩放网站以显示在iphone

回答

相关问题