javascript - 移动网站根据方向更改调整大小在 Safari 中不起作用

Question

我是移动网站开发的新手，请多多包涵。目前我的网站 ( http://farhillsanimalclinic.com/mobile ) 似乎在 Android 中正常运行，但我在 Safari 中遇到了问题。当我从纵向更改为横向时，所有内容都会正确调整大小，但是当从横向切换为纵向时，元素不会调整大小。我知道正在调用调整大小函数，因为我临时向它添加了一个警报，但它似乎无法正常工作。正如我提到的，它在 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);

如果重要，我将使用以下内容来定义视口(viewport):

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

Answer 1

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