0

ウィンドウのサイズを変更し、シミュレーターを使用してブラウザーでレスポンシブ Web ページをテストすると、すべて問題ありませんでした。今、実際の iPhone 4S でページをテストしたところ、奇妙な結果が得られました。

縦表示でページを読み込んでも問題ありません。横表示に切り替えても問題ありません。しかし、携帯電話をもう一度縦表示に戻すと、奇妙なことが起こります。縦バージョンが表示されるのですが、bodyがうまくリサイズされていないようです。右側に大きな空の領域と垂直スクロールバーが表示され、左側に Web ページの要素が表示されます。スクリーンショット:

垂直 #1
ここに画像の説明を入力

水平
ここに画像の説明を入力

垂直 #2
ここに画像の説明を入力

これは私が体に持っているCSSコードです（注：私はまだそのプロジェクトに取り組んでいるので、色とフォントは一時的にそのように書かれているだけです）：

body {
    margin: 0;
    background-color: grey;
    color: black;
    font-family: Georgia, serif;
    line-height: 1.5;
    background-image: url(../img/bg.png);
}

また、次のような em ベースのメディア クエリも使用します。

@media only screen and (min-width: 30em) {
   /* Stuff */
}

メディア クエリ内では、本文は何も変更しません。

私が持っているHTMLファイルの頭に

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

一部のデバッグでは、body要素のサイズが正しく変更されていることがわかりましたが、html要素はそうではありません。

何がその問題を引き起こす可能性があるか考えていますか?

4

2 に答える 2

0

html:

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

css を追加してみてください:

@media only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait)

と、

@media only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape),
only screen and (min-device-pixel-ratio : 2)  and (orientation:landscape)

Retina ディスプレイ用。

たぶん、このリンクが役立つかもしれませんhttps://developer.mozilla.org/en-US/docs/CSS/Media_queries

于 2013-02-02T20:00:36.603 に答える
0

わかりました、私はついにこれを理解しました！この質問を参照してください。これはまさに私が抱えている問題です。
HTML5 プレースホルダー テキストが Safari で幅を追加すると、スクロールバーとちらつきが発生する

于 2013-02-07T23:25:38.227 に答える