iPhone媒体查询在Safari中不起作用，在Chrome中正常答案

【问题标题】：iphone media queries not working in Safari, ok in ChromeiPhone媒体查询在Safari中不起作用，在Chrome中正常
【发布时间】：2019-03-01 16:28:17
【问题描述】：

我在 iphone 上使用以下@media 查询来进行纵向/横向。它们在 Chrome 中运行良好，但在 Safari/iPhone 模式下无法正常运行。我做错了什么？

@media only screen 
  and (max-device-width: 414px) 
    and (max-device-height: 812px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {

  .mq-landscape {
    display:none;
  }
}

@media only screen 
  and (max-device-width: 812px) 
    and (max-device-height: 414px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  .mq-portrait {
    display:none;
  }
}

这是一个stackblitz链接：

参考：https://forum.ionicframework.com/t/v4-iphone-media-queries-not-working-in-safari-simulator-ok-in-chrom/142730/2

【问题讨论】：

标签： css ionic-framework safari media-queries mobile-safari

【解决方案1】：

使用max-width 而不是max-device-width

看到这个答案：Safari Responsive Design Mode CSS media query 'device' not applied

这是 Safari 的更正/工作示例：

@media only screen 
  and (max-width: 414px) 
    and (max-height: 812px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {

  .mq-landscape {
    display:none;
  }
}

【讨论】：