0

私はモバイルサイトの開発に慣れていないので、我慢してください。現在、私のサイト（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);

重要な場合は、ビューポートを定義するために以下を使用しています。

<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

このバグには、方向変更ズームの修正があります。これは100％の解決策ではありませんが、向きをあまり速く変更しない場合に機能します。

于 2012-11-07T07:34:00.233 に答える
0

MobileSafariのレポートwindow.outerWidthに問題があることが判明しました。縦向きで読み込んだ後は320pxを正しく報告しましたが、横向きから縦向きに切り替えた後（ページが最初に読み込まれた方法に関係なく）、320を再び報告することはありませんでした。window.innerWidthにスワッピングすると、うまくいったようです。他のブラウザでは予期していなかった新しい問題が発生しないことを願っています。

于 2012-11-08T17:07:31.827 に答える