медиазапросы iphone не работают в Safari, хорошо в Chrome

Question

Я использую следующие запросы @media для портретной / альбомной ориентации на iphone.Они отлично работают в 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;
  }
}

Вот ссылка на стек:

• test: 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;
  }
}