引導媒體查詢方向改爲橫向不低於物理設備

我面臨着一個自舉很奇怪的問題，工作基本上我有這個頁面http://excellencewebworks.com/bootstrap/video_skin.html 引導媒體查詢方向改爲橫向不低於物理設備

在這裏，我將視頻覆蓋着平板電腦的視頻皮膚。當我在Mozilla Firefox -> Tools-> Responsive Design View for 360 x 640 dimension的響應模式下檢查頁面時，它在縱向和橫向模式下效果很好。

但是，當檢查物理設備中的同一頁面時，它僅適用於縱向而不是橫向，設計在橫向模式下會發生變化。奇怪看到這一點。

任何人都可以請看看這個，讓我知道我在做什麼錯在這裏？

感謝， Ronak沙阿

來源

2015-09-28 Ronak Shah

您可以嘗試從媒體查詢中刪除'only'。 – CodeRomeos

雖然刪除後不工作！ –

試試這個：[iphone 4 and 4s]（https://css-tricks.com/snippets/css/media-queries-for-standard-devices/#iphone-queries） – CodeRomeos

這裏是風景和肖像模式媒體查詢試試這個代碼。

/* ----------- iPhone 4 and 4S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

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

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

} 

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

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

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

} 

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

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

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

} 

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

} 

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

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) { 

} 

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

} 

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

}

來源

2015-09-28 09:01:20

上面的媒體查詢沒有意義，截至目前我只想讓它在360 * 640設備上工作。 –

你可以添加你想要的分辨率，而不是我給定的例子中的特定值。 –

您還可以檢查我的媒體查詢編寫的@media只有屏幕和（最小設備寬度：360px）和（最大設備寬度：640px）{} –

好了，給它一個嘗試是這樣的：

@media screen and (min-width:360px) and (max-width:640px){ 
    /*-----style----*/ 
}

另外，還要確保你的媒體查詢是不重疊的。

來源

2015-09-28 09:30:01 CodeRomeos

對不起兄弟！不工作@media屏幕和（最小寬度：360px）和（最大寬度：640px）{}不起作用。 –

引導媒體查詢方向改爲橫向不低於物理設備

回答

相關問題