iPad のモバイル Safari と標準の PC のブラウザーで視覚化されるサイトを開発しています。レイアウトを (特にモバイル ブラウザーに) 適応させるために、次の CSS3 メディア クエリを使用しています。
@media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) { #ガレリア{ マージン左:5%; マージントップ:15%; } } @media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) { #ガレリア{ マージン左:16%; マージントップ:15%; } }
この方法は機能しますが、デバイスを回転させるとバグが出てきます。基本的にこのページには、画像を表す「ロゴ」と呼ばれるものがあります。その CSS は次のとおりです。
#ロゴ{ 位置:絶対; 上:30px; 左:26%; } #ロゴ画像 { 幅:75%; }
デバイスを回転させるたびに、この画像はさらに小さくなります。このバグを回避するにはどうすればよいですか? すべての答えをありがとう!