0

我是移动网站开发的新手，所以请耐心等待。目前我的网站 ( http://farhillsanimalclinic.com/mobile ) 似乎在 Android 中运行，但我在 Safari 中遇到问题。当我从纵向更改为横向时，所有内容都会正确调整大小，但是从横向切换到纵向时，元素不会调整大小。我知道 resize 函数被调用了，因为我暂时向它添加了一个警报，但它似乎无法正常工作。正如我所提到的，它在 Android 手机上运行良好。

以下是相关代码：

function getWidth() {
    xWidth = null;
    if(window.screen != null)
        xWidth = window.screen.availWidth;
    if(window.outerWidth != null)
        xWidth = window.outerWidth;
    return xWidth;
}

function getHeight() {
    xHeight = null;
    if(window.screen != null)
        xHeight = window.screen.availHeight;
    if(window.innerHeight != null)
        xHeight =   window.innerHeight;
    return xHeight;
}

function resizeWrapper() {
    xWidth = getWidth();
    xHeight = getHeight();
    $("#wrapper").css("width", xWidth + "px");
    $("#wrapper").css("min-height", xHeight + "px");
}

$(window).bind('orientationchange', resizeWrapper);
$(window).bind('resize', resizeWrapper);

如果重要，我将使用以下内容来定义视口：

<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />
4

2 回答 2

0

原来是 Mobile Safari 报告 window.outerWidth 的问题。在纵向加载后，它正确地报告了 320 像素，但在从横向翻转到纵向后（无论页面最初是如何加载的），它再也没有报告 320。切换到 window.innerWidth 似乎已经成功了；我只是希望它不会在其他浏览器上引入我没有预料到的新问题。

于 2012-11-08T17:07:31.827 回答
0

有针对此错误的方向更改缩放修复。这不是一个 100% 的解决方案，但是当您不快速更改方向时它可以工作。

于 2012-11-07T07:34:00.233 回答