Androidで期待どおりに動作しないビューポートメタタグ

Question

レスポンシブウェブサイトを作成し、ビューポートメタタグを使用してさまざまなデバイスのスケーリングを修正しました。私はまた、これは私の体要素の最小幅であるとして、以下の525pxをスケーリングしていないデバイスを伝えるためにJavaScriptを使用しました：

<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 

window.onload = function() { 
    if(window.innerWidth <= 525) { 
     var mvp = document.getElementById('myViewport'); 
     mvp.setAttribute('content','width=525'); 
    } 
} 

をこれは完全に私はそれをテストしたほぼすべてのデバイスを動作します。具体的には、iOSモバイルデバイス（iPhone/iPad）で完全に動作します。ウェブサイトは完全にスケーリングされており、すべてが画面内に収まり、ユーザーが水平にスクロールしたり、ズームインしたり、ズームアウトしたりする必要はありません。

ただし、Android搭載端末でウェブサイトを表示すると、期待通りに画面に表示されません。すべてのコンテンツが画面に収まるように、ユーザーはわずかにズームアウトする必要があります。これは、ビューポートがAndroidデバイスで正しく動作していないと推測しています。なぜどんなアイデア？

私は基本的に各デバイスにロードして画面内に完全に収まるようにしたいので、ユーザーはコンテンツが収まるようにズームアウトする必要はありません。

ウェブサイトへのリンクは次のとおりです。

Answer 1

ページのコンテンツはデバイスのビューポートよりも幅が広いwww.wyevalleycampers.com/Version2/は、Chromeはすべてのコンテンツが表示されるように、完全にズームアウトページをロードします。

あなたのケースではブラウザが過度に拘束されています。 window.innerWidthが< = 525の場合、ユーザーの端末には525ピクセル幅以下のビューポートがあります。その後、525ピクセル幅のレイアウトにレンダリングするようにブラウザに指示します。最小と初期の縮尺を1に設定しているので、ブラウザはズームアウトしてすべてのコンテンツを表示することはできません。スケール= 1では、ビューポートがコンテンツの幅よりも小さいので、ズームアウトする必要があります。初期スケールと最小スケールを削除すると役立ちます。

アップルは最近、ビューポートメタタグのuser-scalable属性を尊重しないようにしましたが、私は同じ理由でminimum-scaleを尊重しないかもしれないと思います。