Question

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

有关如何解决该问题的任何建议吗？

Answer 1

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

要检测移动电话何时是纵向或横向移动，请使用orientation，例如：

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

您还可以将特定方案链接在一起，具体取决于您希望的具体方式。例如，如果要为设备宽度为400px的纵向浏览器设置样式，则可以执行以下操作：

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

* 应该注意的是，媒体查询应该位于CSS文件的最末端，否则它们将无法正确覆盖现有的样式。

Answer 2

对于我的一些移动项目，我一直在为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（）。我没有方便剪切和粘贴工作代码的项目 - 抱歉。：\

Answer 3

很难说看到网站，但我会采取刺：你明确说网站宽度是320px，当你旋转它时手机的宽度不是这样。您的包装器应为width: 100%，以便文档自行重新缩放或重新缩放视口。

正确缩放网站以在iPhone中显示

3 个答案: