$（ウィンドウ）.width（）はビューポートの幅を正しく与えていません

Question

私はほとんど常に$(window).width()を使用してビューポートの幅を確認しました。通常、ブラウザとデバイスの両方で動作します。しかし、ビューポートの幅が768pxより小さい場合、特定のスプラッシュ画面を表示する必要があるウェブサイトの場合、これは機能しません。それはポイントまでの正しい幅を与えますが、それ以下ではブラウザを作るためにどれくらい狭くしても980ピクセルを与え続けます。このサイトにはいくつかの特定の条件があります：

1. このサイトは、（ブートストラップを使用して）反応しましたが、反応しませんでした。このため、viewportメタタグを削除し、レスポンス幅を上書きするCSSの次のルールを設定しました。

   .container {width：1170px; }

2. ブラウザ全体のサイズを変更した場合、つまりすべてのブラウザタブを含むウィンドウの場合、正しい幅（980pxよりも小さく、これは望ましい動作です）が得られますが、開発ツールを使用してモバイルそこからのレイアウトは980px以下とは決して報告されません。

3. メインブラウザウィンドウのみのサイズ変更には問題はありませんでしたが、デバイスでも機能しないという問題がありました。私はアラートを追加し、モバイルデバイスでは、再び幅が980px未満になることはありません。

誰かがこれを解決する方法を提案したり、期待どおりに機能しない理由を説明してください。

Answer 1

私は権威のある情報源を見つけることができないかもしれませんが、スマートフォンに言及しているページには、特に断りのない限り、ウェブサイトが980pxと仮定するページが多数あります。例えば

Apple's developer siteは、図3-4に示すように

ウェブページの大部分は、縦方向に980個のピクセルに設定ビューポートの幅の表示領域にうまく収まると言います。 iOSのSafariでビューポートの幅を980ピクセルに設定しなかった場合は、ウェブページの左上隅のみが灰色で表示されます。ただし、このデフォルトはすべてのWebページで機能しないため、ウェブページが異なる場合は、ビューポートメタタグを使用することをおすすめします。ビューポートの詳細については、Supported Meta Tagsを参照してください。 320と980ビューポートの幅

の

図3-4の比較は

（ちなみに、それは最初にこれをしなかったが、他の電話がすぐに続く。これはiPhoneでした）

解決策はどちらかと言えば入れます

<meta name="viewport" content="width=device-width"> 

を頭に入れて（あなたの場合は、の先頭に）、サイトが応答していないことを確認して、電話で最適に動作しません。