6

jquery関数を使用してAndroidデバイスの向き変更時のウィンドウ幅を計算しようとしています$(window).outerWidth(true);。この計算により、Androidではなく両方iphoneの方向変更で正しい幅が得られます。ipad最初に横向きモードまたは縦向きモードでページを読み込んだ場合、正しい幅が得られますが、ページを読み込んだ後に向きを変更すると、横向きモードの場合と同じように縦向きモードの幅が得られます。その逆も同様です。何が起こっているのか、Androidデバイスの向きの変更時に正しいウィンドウ幅を取得できるようにこの問題をどのように処理できるかを提案してください

4

7 に答える 7

10

javascriptscreenオブジェクトを使用しないのはなぜですか。次のコマンドで画面のサイズを取得できるはずです。

screen.height;
screen.width;
于 2012-04-18T18:59:56.920 に答える
7

私もこの問題に悩まされ、すべてのプラットフォームで機能する最良の解決策を見つけました。以下は「orientationchange」イベントのコードです。

function onOrientationChange(event)
{
    setTimeout(function(){
       'Enter you code here';
    },200);
}

願わくば、それはあなたと他のほとんどの人にも役立つでしょう..乾杯。

于 2013-09-22T07:03:30.670 に答える
1

この投稿には、あなたに関連する可能性のある解決策があるようです。

http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android

于 2012-04-19T00:53:33.883 に答える
1 
                            var isMobile = {
                                Android: function () {
                                    return navigator.userAgent.match(/Android/i);
                                },
                                BlackBerry: function () {
                                    return navigator.userAgent.match(/BlackBerry/i);
                                },
                                iOS: function () {
                                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                                },
                                Opera: function () {
                                    return navigator.userAgent.match(/Opera Mini/i);
                                },
                                Windows: function () {
                                    return navigator.userAgent.match(/IEMobile/i);
                                },
                                webOS: function () {
                                    return navigator.userAgent.match(/webOS/i);
                                },
                                any: function () {
                                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                                }
                            };


                            var tell_if_mobile;
                            var mobile_tablet;
                            if (isMobile.any()) {
                                tell_if_mobile = true;
                            } else {
                                tell_if_mobile = false;
                                var windowWidth = window.screen.width < window.outerWidth ?
                                                  window.screen.width : window.outerWidth;
                                tell_if_mobile = windowWidth < 800;
                                mobile_tablet = windowWidth >= 500 ? "Tablet/Phablet Device" : "Desktop View (Mobile)";
                            }

                            var mobile_type;
                            mobile_type = isMobile.Android() ? "Android Device" :
                                          isMobile.BlackBerry() ? "Blackberry Device" :
                                          isMobile.iOS() ? "iOS Device" :
                                          isMobile.Opera() ? "Opera Mobile/Mini" :
                                          isMobile.Windows() ? "IEMobile" :
                                          isMobile.webOS() ? "webOS device" :
                                          tell_if_mobile == true ? mobile_tablet :
                                          "Not a mobile device";
alert(mobile_type); //result
于 2014-01-02T06:57:25.310 に答える
1

方向変更イベントをリッスンする代わりに、ウィンドウサイズ変更イベントをリッスンできます。これにより、window.innerHeight/outerHeightプロパティが更新されたことが確認されます。

于 2015-08-13T05:07:36.120 に答える
0

window.innerWidthそれぞれ試してみてくださいwindow.innerHeight; androidはouterWidthとHeightについてではない可能性があります。

于 2012-04-18T19:27:44.247 に答える
0

これは醜いですが、動作します。向きを変更した後のモバイルビューポートの高さ

window.addEventListener('orientationchange', () => {
  const tmp = () => {
    this.onResize()
    window.removeEventListener('resize', tmp)
  }
  window.addEventListener('resize', tmp)
})
于 2019-11-21T15:55:15.137 に答える