Что мультимедийные запросы CSS соответствуют новым устройствам Apple? Я должен установить body
background-color
изменить X безопасный цвет фона области.
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
<час> @media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
<час> @media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6 +/6s +/7 +/8 + совместно использует те же размеры, в то время как iPhone 7/8 также делает.
Поиск определенной ориентации?
Портрет
Добавляют следующее правило:
and (orientation : portrait)
Среда
Добавляют следующее правило:
and (orientation : landscape)
Ссылки:
Вот некоторые следующие мультимедийные запросы для iPhone. Вот касательно ссылки https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s, 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone XR */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }
/* iphone XS */
@media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }
/* iphone XS Max */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
Я заметил, что ответы здесь используют: device-width
, device-height
, min-device-width
, min-device-height
, max-device-width
, max-device-height
.
воздержитесь от использования их, так как они удерживаются от использования . см. MDN для ссылки . Вместо этого используйте постоянного клиента min-width
, max-width
и так далее. Для дополнительного обеспечения можно установить минуту и макс. к той же сумме пкс. Например:
iPhone X
@media only screen
and (width : 375px)
and (height : 635px)
and (orientation : portrait)
and (-webkit-device-pixel-ratio : 3) { }
можно также заметить, что я использую 635 пкс для высоты. Попробуйте его сами, высота окна является на самом деле выполненным средством моделирования iOS на 635 пкс для iPhone X, и в сети Safari инспектор делает window.innerHeight
. Вот несколько полезных ссылок на этом предмете:
Кажется что самое точное (и бесшовный) метод добавления дополнения для iPhone X/8 с помощью ENV ()...
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
Вот ссылка, описывающая это: