この種の質問は以前に何度も聞かれたことは知っていますが、特定の問題に対する回答がまだ見つからないため、投稿することにしました。
それは本当にちょっとした癖だと思いますが、ウィンドウのサイズを変更するとブラウザーで適切にサイズ変更され、モバイルで縦向きまたは横向きにロードすると完全に機能するレスポンシブ サイトを設計しました。ただし、ポートレートでロードしてからモバイルをランドスケープに変えると、一部のモバイル ブラウザは新しい画面サイズの正しいスタイルをロードしません - しかし、すべてのブラウザでこのようになるわけではありません! これまでのところ、標準の Android ブラウザーを使用して Android 4.0.4 バージョンの電話でテストしましたが、向きを切り替えると正しくサイズ変更されますが、同じ電話でブラウザーとして google chrome を使用すると、異なるスタイルが適用されますが、ページを更新するとそれが適用されます。正しいスタイリングを適用します。
だから私の質問は、ページをリロードすることなく、方向の変更時にモバイルブラウザーにページを正しくレンダリングさせるにはどうすればよいですか?
問題のサイトは www.the-baobab.co.uk で、ビューポート メタ タグを使用して width=device-width と初期スケール 1 に設定し、特定の最大ピクセル幅でメディア クエリを呼び出して配置とレイアウトを変更しています。私のstylesheet1.cssで見ることができるさまざまな異なる画面サイズについては、こちら