ipadズームの問題を解決するためのウィンドウの向きを使用して

Question

私はあなたが回転時にipadが持っている小さな問題に精通していると確信しています。ユーザーが回転すると、ipadは最初の縮尺を保持したままになり、再表示されるとズームインします。

多くの人々は、それが、ユーザはもうウェブサイトのズームイン、ズームアウトすることはできませんを除いて素晴らしい作品この

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

でそれを改善示唆しています。向きの変化を検出してビューポート情報を交換してリセットする方法があるのなら、私は不思議です。いうよりもスワップので、これは動作しません

window.onorientationchange = function() { 
    $("#view-port").attr("content", "width=device-width, maximum-scale = 1.0, initial- scale= 1.0"); 
    setTimeout("resetMetaTag()", 500); 
}; 

    var resetMetaTag = function() { 
    $("#view-port").attr("content", "width=device-width, initial-scale= 1.0"); 
    console.log($("#view-port").attr("content")); 
    }; 

：負荷の例

については

は私のビューポートが

<meta name="viewport" id="view-port" content="width=device-width, initial-scale=1.0"/> 

だろうその後、理論的にはこのような何かをして、いくつかのjsを持っています方向が設定される前にビューポートが非同期に行われます。画面が再表示される前にある種類の「回転しようとしている」かどうかを検出する方法はありますか？

多くの助けになります。

Answer 1

ユーザーがズームイン/アウトできるようにするには、ビューポートのプロパティにuser-scalable=1を追加し、maximum-scale=1.0を削除するか、それを高い値に変更します。あなたが姿勢変化を検出したい場合は、

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

ウィンドウにイベントリスナーをアタッチ：maximum-scale=1.0はまさにそれを意味し、ユーザーは現在のレベルよりも任意の大きな画面を拡大縮小することができません

window.addEventListener('orientationchange', updateOrientation, false); 

あなたは、デバイスがどの方向を検出し、ビューポートがそれに応じて属性をリセットすることができupdateOrientationを機能で

：

function updateOrientation() { 
    if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) { 
    return; 
    } 

    var viewport = document.querySelector("meta[name=viewport]"); 

    switch (window.orientation) { 
    case 0: //portrait 
     //set the viewport attributes to whatever you want! 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    case 90: case -90: //landscape 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    default: 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    } 
} 

Answer 2

が、これは私のために動作してみてください：

<meta name="viewport" content="width=device-height, minimum-scale=1, user-scalable=1;"> 

ipadを回転させると、適切なスケールが検出されます。