web-dev-qa-db-ja.com

CSSでポートレートおよびランドスケープメディアクエリを設定する方法

メディアクエリは次のとおりです。

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

しかし、タブレットでは、横長モードの場合、このdivは表示されます

 .visible-tablet {
    display: inherit !important;
  }

ポートレートモードの場合、このdivは表示されています

.visible-phone {
    display: inherit !important;
  }

タブレットを自動回転モードに切り替えるたびに、このdiv .visible-tabletが常に表示されるようにします（ポートレートとランドスケープ用）

しかし、私はポートレートとランドスケープの条件を使用しましたが、それでもこの問題に直面しています。コメントはありますか？

htmlcssmedia-queries
25
UI_Dev

iPad Mediaクエリ（すべての世代-iPad miniを含む）

ユーザーに一貫したエクスペリエンスを提供し、開発者に簡単な時間を提供するというAppleの取り組みのおかげで、5つの異なるiPad（iPad 1-5およびiPad mini）すべてを1つのCSSメディアクエリでターゲットにできます。次の数行のコードは、レスポンシブデザインに最適です。

縦向きと横向きのiPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

横向きのiPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPadを縦向きに

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3および4メディアクエリ

第2世代および第2世代のRetina iPad（または同様の解像度のタブレット）のみをターゲットにして@ 2xグラフィックスやタブレットのRetinaディスプレイの他の機能を追加する場合は、次のメディアクエリを使用します。

縦向きと横向きのRetina iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

ポートレートのRetina iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1および2 Media Queries

低解像度のiPadディスプレイに異なるグラフィックを提供したり、異なるタイポグラフィを選択したりする場合、以下のメディアクエリはレスポンシブデザインの魅力のように機能します。

縦向きと横向きのiPad 1および2

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

横向きのiPad 1および2

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

ポートレートのiPad 1および2

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

ソース： http://stephen.io/mediaqueries/

33
KiV

また、これと同じくらい簡単にすることもできます。

@media (orientation: landscape) {

}
14
quemeful