web-dev-qa-db-ja.com

iPad / iPhoneでポートレートとランドスケープを切り替えると、レスポンシブサイトが拡大表示される

Twitter Bootstrap here： http://zarin.me/cce/ を使用してレスポンシブサイトを構築しました。

レスポンシブデザインはiPadやiPhoneでうまく機能しますが、デバイスをポートレートからランドスケープに切り替えると、画面に適応するのではなくサイトが拡大されます（画面のピンチが機能します）。

私は何が欠けていますか？これはビューポートの問題ですか？ここに私が持っている唯一のビューポートコードがあります：

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

前もって感謝します！

orientationresponsive-designviewportscreen-orientationdevice-orientation
46
zarinf

最大スケールも追加したい

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

更新コメントのいくつかに同意します。これは悪い習慣なので、宣言はユーザーによるスケーリングを制限すべきではありません。以下はより良いアプローチであり、ズームのバグはずっと前からAppleによって修正されていると思います。

<meta name="viewport" content="width=device-width, initial-scale=1">
70
justinavery

最大縮尺を「1」に設定しても機能しますが、ユーザーがサイト内の何かにズームインすることを制限します。ユーザーエクスペリエンスには理想的ではありません。代わりにこのJavascriptを試してください iOS-Orientation Change Fix

15
minneapolisdan

メタにinitial-scale=1.0を設定します。

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

次に、CSSで-webkit-text-size-adjust:100%;を設定します。

body {
  -webkit-text-size-adjust: 100%;
}

この方法では、ユーザーがWebサイトを拡大するのを止めることはできませんが、ブラウザーがテキストのサイズを自動的に調整しないようにします。

10
Leigh McCulloch

これは、ページ上のコンテナの1つが100％を超えて流出したときに発生します。ページは最初の向きでは問題なく表示されますが、向きを変更すると、余分な幅が何らかの理由で有効になり、ページが拡大され、通常は左右に余白が残ります。すべてのメディアクエリをチェックして、後続のパディングやマージンがないことを確認してください。

3
user1199529

以下は私のために機能し、ユーザーはズームインすることができます

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
2
jjgrainger

Ipad 3とIOS 7.1.2でまさにこの問題があった

Maximum-scale = 1を使用すると修正され、ズームが可能になります

Jsソリューションが機能しませんでした

1
David Sims

主にiPhone-Xで問題に直面している場合は、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

それは私の仕事です。

1
Amit Dwivedi