移动设备上的响应式 Web 问题

Question

您好，我正在尝试完成一个在移动浏览器上出现响应问题的网站，我的问题出在我的 css 媒体查询上，浏览器屏幕大小不属于我创建的媒体查询。例如，我对 iphone 4 的屏幕进行了媒体查询，但浏览器没有读取它的样式，而是读取了 iphone 6 css 样式。这是我如何进行媒体查询的

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

  .if-wrap .if-table-wrap, .if-wrap .if-grid {width:70%;right: 25px;}
  .if-box2 {top: 98px !important;margin: 0 10px 0 99px !important;padding: 54% 54% 0 0 !important;}


}

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

  .if-box2 {top: 166px !important;margin: 0 10px 0 165px !important;padding: 54% 54% 0 0 !important;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
 .if-box2 {top: 166px !important;margin: 0 10px 0 165px !important;padding: 54% 54% 0 0 !important;}
}

/* ----------- 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) {
    .if-box2 {top: 200px !important;margin: 0 10px 0 200px !important;padding: 56% 56% 0 0 !important;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .if-box2 {top: 100px !important;margin: 0 10px 0 100px !important;padding: 61% 61% 0 0 !important;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .if-box2 {top: 200px !important;margin: 0 10px 0 200px !important;padding: 56% 56% 0 0 !important;}


}

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

  .if-box2 {top: 118px !important;margin: 0 10px 0 118px !important;padding: 60% 60% 0 0 !important;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
   .if-box2 {top: 118px !important;margin: 0 10px 0 118px !important;padding: 60% 60% 0 0 !important;}


}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  .if-box2 {top: 203px !important;margin: 0 10px 0 203px !important;padding: 53% 53% 0 0 !important;}

}

/* ----------- 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) { 
 .if-box2 {top: 240px !important;margin: 0 10px 0 240px !important;padding: 53% 53% 0 0 !important;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
   .if-box2 {top: 133px !important;margin: 0 10px 0 133px !important;padding: 60% 60% 0 0 !important;}


}

我相信浏览器应该从上到下阅读它，所以逻辑应该是 iphone 4 应该在其他任何东西之前阅读 1st.. 还是这是一个错误的理论？ 我也在使用 google chrome 的开发人员工具来查看我的页面的响应能力这个工具是否准确？因为我尝试在我的 iphone 5s 上查看我的网站，并且该设计似乎在不在 chrome 上工作..

请帮我解决这个响应式问题，如何让视口读取该设备的屏幕大小... 提前谢谢我对这个响应式的东西有点新 在其他任何事情之前，我也将它包含在我的标题部分中

<meta name="viewport" content="width=device-width,initial-scale=1">

Answer 1

您可能只想使用min-width 和max-width，而不是使用min-device-width 和max-device-width 之类的东西。这将使用视口宽度而不是设备宽度，这很可能是您需要的。

此外，如果您的机器的像素比率为 1，则像素比率媒体查询可能会导致您的布局无法在 Chrome 上正确触发。如果您没有特定理由来定位这些像素比率，您可能应该删除它们，因为它们在这种情况下，它会给你带来更多的伤害。