引导媒体查询方向改为横向不低于物理设备

我面临着一个自举很奇怪的问题，工作基本上我有这个页面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）{}不起作用。 –

引导媒体查询方向改为横向不低于物理设备

回答

相关问题