Html 引导媒体查询方向更改为横向在物理设备下不工作

我在bootstrap中面临一个非常奇怪的问题，基本上我有这个页面

在这里，我添加了覆盖着平板电脑视频皮肤的视频。当我在

Mozilla Firefox->Tools->responsive Design View for 360 x 640 dimension

的响应模式下查看页面时，它在纵向和横向模式下工作良好

但当在物理设备中检查同一页时，它只在纵向模式下工作，而不在横向模式下工作，设计会在横向模式下改变。真奇怪

谁能调查一下，让我知道我做错了什么

谢谢，

---

Ronak Shah

这是用于横向和纵向模式媒体查询的代码，请尝试以下操作

/* ----------- 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) { 

}

---

好的，试试这样的方法：

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

---

还要确保媒体查询没有重叠

您可以尝试仅从媒体查询中删除

。仅删除后不工作！试试这个：我不需要在iphone4和4s上测试，我只想让它在360*640尺寸的设备上工作，稍后我也会为iPhone和iPad做测试，但我只是测试这个一维，一旦我确定我可以做剩下的一个。问题是它在emulator下工作良好，那么它应该也可以在设备上工作，但在设备上不能在横向模式下工作！上面的媒体查询没有任何意义，到目前为止，我只想让它在360*640设备上运行。您可以添加所需的分辨率，而不是我给出的示例中的特定值。您还可以检查我的媒体查询是否写入@media only screen and（最小设备宽度：360px）和（最大设备宽度：640px）{}当我检查ion mobile时，它只能在纵向模式下工作，但横向模式css不能正常工作！！但是当我在模拟器上登记时效果很好！媒体屏幕和（最小宽度：360px）和（最大宽度：640px）{}不工作不会产生任何影响。