【问题标题】: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%,以便文档自行重新缩放或重新缩放视口。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-10-26
        • 2018-06-13
        相关资源
        最近更新 更多