ブートストラップレスポンスサイトIngoresビューポート設定 - twitter-bootstrap、レスポンシブデザイン、ビューポート

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

ザ 問題 Bootstrapのv2.3.2response-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行は何ですか？

回答：

回答№1は1

CSSの問題のある画像に100％の幅を追加すると、問題が解決するはずです。

編集：

cssのms-viewportタグは、実際にはW3仕様によるビューポートタグを実装するための標準的な方法です。 トレントウォルトン 素晴らしい 役職 およびへのリンク 後もう少し それがルールを説明しています。

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

---

回答№2の場合は0

これを試して。

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

---

回答№3の場合は0

あなたは以下のように完全なプロパティを設定することができます:)

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

---

回答№4の場合は0

また、この問題があり、cssで調整できるかどうか、または一部のコンポーネントのレスポンシブスクリプトを停止できるかどうかを確認する必要があります。

グーグルで準備ができている「ブートストラップレスポンシブスクリプトを停止する」を選択しないでください。うまく機能しないため、ナビゲーションバーの応答性が台無しになります。

---