2017-11-16 13 views
2

いくつかの理由から、私はportraitからlandscapeと同じスタイルを保つ必要があります。どのようにcss3メディアクエリを使用して達成するには?iPadの `portrait`と同じスタイルを` landscape`に保つ方法

タッチパッドの機能が無効になっているためです。

私が試したが、それはまだあなたがあまりにもthisをチェックしたいかもしれませんdesktopビュー

@media screen and (max-device-width:1024px){} 
+1

あなたは(https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css [ここ]にチェックがあります)? – Swellar

+0

が関連している可能性があります:https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css –

+1

ああ@Swellarはちょうど同じようにコメントしました! –

答えて

0

を示しています。以下は関連するものです。


 

 

 
/* iPads (portrait and landscape) ----------- */ 
 

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

 

 
/* iPads (landscape) ----------- */ 
 

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

 

 
/* iPads (portrait) ----------- */ 
 

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

 

 
/********** 
 
iPad 3 
 
**********/ 
 

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

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

 

 

 
/* iPhone 4 ----------- */ 
 

 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 

 
/* iPhone 5 ----------- */ 
 

 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 

 
/* iPhone 6 ----------- */ 
 

 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 

 
/* iPhone 6+ ----------- */ 
 

 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
} 
 

 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { 
 
    /* Styles */ 
 
}

関連する問題