6

Windows 8では、基本的なTwitter Bootstrapテンプレートを使用して、IE 10デスクトップブラウザーを狭いウィンドウに狭めると（右下を参照）、スマートフォン向けの幅スタイル（狭い、高いウィンドウ、および非常に読み取り可能。ただし、IE 10 Metroブラウザを狭いビュー（左下を参照）にスナップすると、狭いウィンドウスタイルを使用するのではなく、ページ全体のビューが縮小されて判読できなくなります。

これは残念なことであり、Metroブラウザの設計またはバグの意図しない結果である可能性があります。

最終リリースで修正されていないと仮定すると、私の質問は次のとおりです。

  1. ページがスナップモードでIE10Metroによって表示されていることを確認する方法はありますか？将来問題になる可能性のあるIEMetroをハードコーディングするのではなく、Modernizrスタイルの方法で動作をテストしてこれを実行したいと思います。ただし、この時点では、修正が機能していることがより重要です。

IE10ナロー幅メトロvsデスクトップ

4

2 に答える 2

5

Raymond Chenが上記のコメントで提案したIEBlogの投稿の助けを借りて、ブートストラップレスポンシブスタイルの後に次のCSSを追加することで、問題を修正することができました。

@media screen and (max-width: 320px) {
   @-ms-viewport { width: 320px; }
}

これにより、IE 10 Metro（スナップサイドバーモード）でのズーム動作が停止し、狭い画面用に最適化されたビューが正しく表示されました。

最後の注意：Twitter Bootstrapテンプレートが最適化される最小幅は480pxです（iPhoneが原因である可能性があります）。したがって、Metroサイドバースナップ表示のページを改善するには、320ピクセルのさらなる最適化を行う必要がある場合があります。

于 2012-06-22T18:12:03.680 に答える
0

私は最近解決策を思いついた。これはJavaScriptベースであり、要求に応じて動作をテストします。

http://menacingcloud.com/?c=targetSnapMode

@viewport宣言と組み合わせると、効果的なコンボになります。

@ -ms-viewport {幅：デバイス幅; } @viewport {width：device-width; }

上記の@viewport宣言については、http：//menacingcloud.com/？c=cssViewportOrMetaTagで説明されています。

お役に立てば幸いです:)

于 2013-06-08T19:46:53.617 に答える