web-dev-qa-db-ja.com

メディアクエリ-iPhoneランドスケープのCSSのみ

横向きモードのiPhone専用のCSSの記述に使用されているのと同じメソッドですか？

cssiphonemedia-queries
14
Dee

あなたはこれを行うことができます

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

これにより、iPhoneはビューポートをデバイスの幅と同じようにレンダリングします。

次に、このcssを使用してランドスケープモード（+320px広い

@media screen and (min-width: 321px){
    //styles
}
14
Jason Gennaro

はい、そうです。チェック： http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Iphoneのみをターゲットにしたい場合は、解像度またはdppx密度をこれらのMQに追加する必要があります。

26
Mattia Astorino

私があなたを正しく理解していて、iPhoneのようなスマートフォンが水平に保持されている場合にのみターゲティングするためのメディアクエリを知りたい場合は、次のようなことを試してください。

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* styles go here */
    body {

    }
}
5
ajsharma

実際に使用する場合：

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

次に、ユーザーがいつでもズームできないようにします。これにより、ユーザビリティの問題が発生する可能性があります。

私はあなたに使用することをお勧めします：

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

この場合、ページを元の初期スケールで表示するように強制します。これにより、iPhoneを回転させるときにレイアウトのサイズが変更されるため、メディアクエリでさまざまなレイアウトサイズをターゲットにできます。

@media only screen and (min-width: 480px) {
    /* landscape mode */
}

@media only screen and (max-width: 479px) {
    /* portrait mode */
}

また、ユーザーはページをピンチしてズームすることもできます。

1
Nicolas Lagarde