Фоновое изображение слишком сильно увеличено на физическом iPad ⇐ CSS

[Anonymous]

Кажется, я не могу этого понять. Я использую Next.js, typescript и chakraUi.

• При просмотре моего приложения с помощью инструментов проверки оно работает точно так, как предполагалось.
• При просмотре моего приложения на мобильном телефоне оно работает так, как предполагалось.
• Но при просмотре на физическом iPad вместо проверки инструментов оно полностью увеличивается.
• Я мог бы исправить это, избавившись от слова «исправлено» в моем медиа-запросе на рабочем столе, но я хочу оставить исправленное для настольного компьютера.
• Я пробовал много вещей, включая объем рекомендаций из чатгпт, но не могу решить эту проблему.
• Примечание: я пробовал использовать атрибуты chakraUI, такие как base, md, sm, lg, но не смог получить их работа, поэтому я прибегнул к классическому CSS-стилю max и min для медиа-экрана.

Это проблема, специфичная для чакры?
< Container
maxW="100%"
id="contact"
backgroundImage={`url('/imgs/contact_banner.png')`}
backgroundSize="cover"
sx={{
backgroundAttachment: 'scroll',

// Media Queries
'@media screen and (min-width: 390px)': {
backgroundAttachment: 'scroll',
},
'@media screen and (min-width: 481 and max-width: 768px)': {
backgroundAttachment: 'scroll',
backgroundPosition: 'cover',
},
'@media screen and (min-width: 1024px)': {
backgroundAttachment: 'fixed',
backgroundSize: 'cover',
// backgroundPosition: 'center',
},
}}
>


Подробнее здесь: https://stackoverflow.com/questions/791 ... sical-ipad