web-dev-qa-db-ja.com

向きが変わったときにウェブページをリロードするにはどうすればよいですか？

デバイスの向きが変わったときにページを自動的に再読み込みするjQuerymobileでイベントをトリガーしようとしています。 max-device-width,orientation:landscape,およびorientation: portraitで記述されたメディアクエリがあります。 <video>は適切にスケーリングされないため、私が考えることができる唯一の解決策は、デバイスを回転させてページを正しいメディアクエリに更新することです。

どうすればこれを行うことができますか？ありがとう。

htmljquery-mobilemobilemedia-queries
13
David Berning

答えてくれた人に感謝しますが、私はこれを見つけて使用し、完璧に機能しました。

<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0:
                case 90:
                case -90: window.location.reload(); 
                break; } 
    };
18
David Berning

これはどう？

$(window).on('orientationchange', function(e) {
     $.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
});

そのorientationchangeイベントを特定のページに名前空間化するのが最善です。

orientationchangeイベントに関するjQMドキュメント

7
Ross
<script type="text/javascript">
window.addEventListener("orientationchange", function() {
        console.log(screen.orientation);
}, false);
</script>
1
logesh kumar

jQueryを使用する

$(window).bind('orientationchange', function (event) {
    location.reload(true);
});
1
Shawn

次のコードを試して、オリエンテーションイベントでページをリダイレクトしてください。これは、私にとってはうまく機能します。

if (window.DeviceOrientationEvent) {
    window.addEventListener('orientationchange', function() { location.reload(); }, false);
}

ありがとう

1
subindas pm