50

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

レスポンシブ デザインは iPad と iPhone でうまく機能しますが、デバイスを縦向きから横向きに切り替えると、サイトは画面に適応するのではなく拡大されます (画面をピンチすることは機能します)。

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

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

前もって感謝します！

4

7 に答える 7

72

また、最大スケールを追加したい

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2012-06-24T22:08:30.160 に答える
15

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

于 2012-09-17T20:03:46.350 に答える
11

initial-scale=1.0メタに設定:

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

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

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

このアプローチでは、ユーザーが Web サイトを拡大するのを止めることはできませんが、ブラウザーによってテキストのサイズが自動的に調整されることはありません。

于 2014-12-05T08:08:02.450 に答える
3

ページ上のコンテナの 1 つが 100% を超えると、これが発生するのを見てきました。ページは最初の向きでは問題なく表示されますが、向きを変更すると余分な幅が何らかの形で強制され、ページが拡大され、通常は左右に余白が残ります。すべてのメディア クエリをチェックして、末尾のパディングやマージンがないことを確認する価値があります。

于 2015-04-03T10:03:04.470 に答える
2

以下は私にとってはうまくいき、ユーザーがズームインできるようにします

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
于 2013-10-16T12:36:27.420 に答える
1

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

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

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

于 2014-07-02T12:35:48.820 に答える