正确缩放网站以在 iphone 中显示答案

【问题标题】：correctly scaling website to display in iphone正确缩放网站以在 iphone 中显示
【发布时间】：2012-03-06 22:19:19
【问题描述】：

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

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

【问题讨论】：

一些非常有用的信息，谢谢。我将解决它，看看它会发生什么。谢谢。

标签： html css mobile

【解决方案1】：

您可以使用 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 文件的最后，否则它们不会正确覆盖你现有的样式。

【讨论】：

【解决方案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()。我没有一个方便的项目来剪切和粘贴工作代码 - 抱歉。 :\

【讨论】：

【解决方案3】：

如果没有看到该网站很难说，但我会采取行动：您明确表示网站宽度是 320 像素，当您旋转它时，手机的宽度不是这样。您的包装器应该是width: 100%，以便文档自行重新缩放或重新缩放视口。

【讨论】：