1

そのため、iOS デバイスでポートレート モードからランドスケープ モードに切り替えると、レスポンシブ Web サイトで奇妙な問題が発生します。ここでライブサイトを見ることができます: http://www.aptify.com

サイトをポートレート モードで表示している場合は、ズームインしている iOS デバイスを回転させます。

現在、次のメタがあります。

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

これに似た質問が 1 つ見つかりました: Media Queries - Landscape Mode on iPhone way too oversizedですが、この質問には正解がありませんでした。唯一の答えは、上記の私のタグに似たものを使用することについて言及していましたが、それは次のとおりでした:<meta name="viewport" content="width=device-width" />なしinitial-scale=1.0-これは違いを生みますか?

また、これは Android デバイスでは発生せず、iOS デバイスでのみ発生することにも注意してください。

以前にこの問題を修正した人はいますか?

ご協力いただきありがとうございます！

4

1 に答える 1

7

そのような状況に役立つように、メモにリンクを含めました。これを修正するもう 1 つの方法は、Jeremy Keith の「Orientation and scale」の記事で概説されているコードを使用することです。

<script type="text/javascript">
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
  for (i=0; i<metas.length; i++) {
    if (metas[i].name == "viewport") {
      metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
    }
  }
  document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
  for (i=0; i<metas.length; i++) {
    if (metas[i].name == "viewport") {
      metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
    }
  }
}
</script>

ユーザーの権利を無視し、デバイスでのズームを許可しない場合は、メタ ビューポートを次のように設定して問題を解決することもできます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2012-08-08T05:25:00.843 に答える