iPhone媒体查询无法在Safari中运行，在Chrome中可以

Question

我正在使用以下@media查询在iPhone上的人像/风景。在响应式/ iPhone模式下，它们在Chrome中可以正常工作，但在Safari中则不能。我在做什么错了？

@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;
  }
}

这是一个堆栈闪电链接：

• 测试：https://angular-ionic4-test-udtdf4.stackblitz.io

• 编辑：https://stackblitz.com/edit/angular-ionic4-test-udtdf4?embed=1&file=src/app/app.component.html&view=preview

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

Answer 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;
  }
}