1

幅 320 ピクセルのレスポンシブ サイトが、携帯電話とデスクトップ ブラウザーでスケーリングが異なるのはなぜですか。

問題は、Bootstrap の v2.3.2 Respond-utilities.less ファイルのこの更新であることが判明しました。

@-ms-viewport{
  /* comment this out!!! */
  width: device-width;
}

これをコメントアウトすると、モバイル 320px ブラウザーはデスクトップ 320px ブラウザーと同じようにレンダリングされます。

他の変更を加える必要はありませんでした。つまり、サイトに 1500px の画像があっても問題なく、次のように既存のビューポート メタ タグを変更する必要はありませんでした。

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

フォローアップの質問: とにかく @-ms-viewport 行は何ですか?

4

4 に答える 4

1

CSS で問題のある画像に幅 100% を追加すると、問題が解消されます。

編集：

CSS の ms-viewport タグは、実際には、W3 仕様に従ってビューポート タグを実装する標準的な方法です。Trent Waltonは素晴らしい投稿をしており、ルールを説明するいくつかのリンクへのリンクがあります。

そのルールが問題を引き起こしている理由はわかりません。いくつかのサイトと組み合わせて使用​​しましたが、問題はありませんでした.

于 2013-06-06T18:09:17.120 に答える