web-dev-qa-db-ja.com

予期しないサイズ変更イベントをトリガーするiphone / ipad

私は自分のサイトのモバイル版に取り組んでいます。メディアクエリとCSSを可能な限り使用していますが、たとえば、小さなデバイスでナビゲーションを折りたたみ/展開リストに変換してスペースを節約するために、JavaScriptを使用しています。

これをすべて処理するために、window.resizeイベントを使用しようとしました。これにより、デスクトップブラウザでサイズ変更中に魔法が発生しますが、iPad/iPhoneで予期しないときにサイズ変更イベントを取得しています。

デスクトップブラウザでは、実際にウィンドウのサイズを変更した場合にのみ、サイズ変更イベントが発生します。モバイルブラウザでは、向きを変更すると（予想される）サイズ変更イベントが発生しますが、何かを展開/縮小するように切り替えると、サイズ変更イベントが発生します。

以下に簡単な例を示します。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
    $(".opener").click(function(){
        $(".box").slideToggle();
    });
    $(window).resize(function(){
        alert("resized");
    });
});
</script>
</head>

<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>

デスクトップブラウザでリンクをクリックしても、警告はありません。 iPhone/iPadのリンクをクリックすると、アラートが表示されます。どうしたんだ？

javascriptjqueryiphonecssmobile
51
rdoyle720

$(window).resize関数に進む前に、ウィンドウの幅を保存し、実際に変更されたことを確認します。

jQuery(document).ready(function($) {

    // Store the window width
    var windowWidth = $(window).width();

    // Resize Event
    $(window).resize(function(){

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($(window).width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $(window).width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});
113
James Greig

受け入れられた答えのバニラジャバスクリプトバージョンはここにあります

document.addEventListener('DOMContentLoaded', function() {

    // Store the window width
    var windowWidth = window.innerWidth

    // Resize Event
    window.addEventListener("resize", function() {

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if (window.innerWidth != windowWidth) {

            // Update the window width for next time
            windowWidth = window.innerWidth

            // Do stuff here

        }

        // Otherwise do nothing
    })

})
3
Brian Jacobs

幅を指定する必要がありました：

   <meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">

スタイル：

html, body
{
       height:100%;
       width:100%;
       overflow:auto;
}
2
Kees C. Bakker

非タッチデバイスでのみサイズ変更イベントの効果を持ちたいという仮定は間違っていますか？その場合、Modernizrを使用して次のようなチェックを行うことができます。

    $(window).resize(function(e){
       if(Modernizr.touch) {
         e.preventDefault();
       }
    });
1
Felix

StackOverflow自体で解決策を見つけました ソリューションのリンク 。これは、sidonaldsonによる答えであり、このような以前に直面した問題の解決に役立ちました。 ty

答えは：

var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });
1
weBBer

@ 3stripeには正しい答えがあります。

これは、jQueryを繰り返しインスタンス化するのではなく、ウィンドウオブジェクトをキャッシュすることにより効率を高めるわずかな変更です（実際のサイズ変更時にresizeイベントが迅速に呼び出されることに注意してください）。

jQuery(document).ready(function($) {

    // Cached window jQuery object
    var $window = $(window);

    // Store the window width
    var windowWidth = $window.width();

    // Resize Event
    $window.resize(function(){

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($window.width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $window.width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});
0
anthonygore

ページが読み込まれたときにアドレスバーを非表示にするために、HTMLボディラッパーを明示的にスクロールしているかどうかを確認します。

0
Abhidev