Question

我是移动网站开发的新手，所以请耐心等待。目前我的网站（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" />

Answer 1

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

移动网站调整方向更改无法在Safari中使用

1 个答案: