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

Question

我在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;
}
}

这是一个堆栈闪电战链接：

• 测试：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 响应式设计模式 CSS 媒体查询"设备"未应用

这是 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;
}
}