1

レスポンシブ Web サイトを作成しましたが、iPad で縦向きにレンダリングすると問題が発生します。

つまり、正しく収まりません。

ビューポート メタのパラメーター値を調整しようとしましたが、モバイルを含むレンダリング全体にも影響します。

Web サイトで次のビューポート メタを使用しました。

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

1 に答える 1

1

デスクトップでは幅が 1550px ですが、モバイルでは 880px しかないサイトで、同様の問題が発生しました。

物事はうまく機能していました

<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />

と組み合わせ

<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

(mobile.css一部の要素の幅を再調整して、880 ピクセルのモバイル レイアウトにうまく収まるようにします。)

iOS シミュレーターで iPad でテストするまでは、問題ないように見えました。縦向きでは問題ないように見えましたが、横向きでは一部の要素 (特に の要素width: 100%) がビューポートの幅に調整されましたが、一部の要素 ( の要素) は調整されませんでしたwidth: 1550px。これは、右にスクロール (またはズームアウト) して 1550px 要素全体を表示すると、要素width: 100%が左側から垂れ下がったままになり、本来の幅の約半分しかないことを意味していました。

解決策は明らかではありませんでしたが、私が解決した方法は次のとおりです。

base.css

body{
    width: 100%;
    min-width: 1550px; 
}

mobile.css

body{
    min-width: 100%; 
}

これにより、ビューポート メタ タグを考慮に入れるタブレットを含むbody、幅が 880 ピクセルを超えるすべてのデバイスで、要素の最小幅が明示的に 1550 ピクセルに設定されます。幅が 880px 未満のモバイル デバイスで表示すると、要素の幅は単純に 100%、つまりビューポートの幅にリセットされます。body

これが、さまざまなデバイスのさまざまなレイアウトに苦労している誰かの助けになることを願っています.

于 2014-10-04T15:45:06.847 に答える