ios10以降のバージョンのスケーリング問題に対するjQueryの解決策の詳細な説明

iOS10 以降でのスケーリングの問題を解決するにはどうすればよいですか?この記事では、jQuery に基づいて iOS10 以降のスケーリングの問題を解決する方法をサンプル コードを使用して紹介します。必要な方は参考にしていただければ幸いです。

具体的なコードは次のとおりです:

<script type="text/javascript">
    /*解决ios10以上版本缩放问题 20171102*/
    window.onload=function () { 
    document.addEventListener('touchstart',function (event) { 
      if(event.touches.length>1){ 
        event.preventDefault(); 
      } 
    }) 
    var lastTouchEnd=0; 
    document.addEventListener('touchend',function (event) { 
      var now=(new Date()).getTime(); 
      if(now-lastTouchEnd<=300){ 
        event.preventDefault(); 
      } 
      lastTouchEnd=now; 
    },false) 
  } 
    </script>

追加: ios10でのユーザーによるページのズームの禁止を見てみましょう

ios10より前では、メタを設定することでユーザーによるページのズームを禁止できます:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

Theメタ設定は ios10 システムでは無効です:

Safari での Web サイトのアクセシビリティを向上させるために、Web サイトのビューポートで user-scalable=no が設定されている場合でも、ユーザーは手動でズームできます。

解決策: イベントをリッスンして

window.onload=function () { 
    document.addEventListener('touchstart',function (event) { 
      if(event.touches.length>1){ 
        event.preventDefault(); 
      } 
    }) 
    var lastTouchEnd=0; 
    document.addEventListener('touchend',function (event) { 
      var now=(new Date()).getTime(); 
      if(now-lastTouchEnd<=300){ 
        event.preventDefault(); 
      } 
      lastTouchEnd=now; 
    },false) 
  }

を防ぐ関連推奨事項:

Python で iOS10 用のアイコンとスクリーンショットを生成する

CSS を使用して画像の高さを自動的に調整する方法

HTML5 モバイル ページのスケーリング問題の解決策詳しい説明

以上がios10以降のバージョンのスケーリング問題に対するjQueryの解決策の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。