размер экрана
Краткое изложение известных нам аспектов разработки серии iPhone выглядит следующим образом:
△Размер разработки каждой модели iPhoneПреобразование в известный размер пикселей:
△Многомерные размеры каждой моделиКарта увеличения на самом деле представляет собой соотношение увеличения между размером пикселя и размером проявки, но это лишь внешнее проявление. Основным фактором, влияющим на увеличение, является PPI (DPI). Понимание взаимосвязи между плотностью экрана и различными размерами поможет нам глубже понять концепцию увеличения: «Изучите основы! Руководство по DPI, специально разработанное для дизайнеров》
В этом обновлении размер и разрешение экрана iPhone8 унаследовали прекрасные традиции iPhone6 и более поздних версий;
Однако iPhone X претерпел серьезные изменения с точки зрения размера экрана, разрешения и даже формы. Давайте возьмем iPhone 8 в качестве эталона, чтобы увидеть, как нам следует рассматривать адаптацию iPhone X.
Давайте посмотрим на изменения размера iPhone X:
2. Адаптация iPhoneX---безопасная зона (безопасная зона)Мнения Apple по поводу дизайна iPhone X следующие:
Основное содержимое должно находиться в безопасной зоне, чтобы оно не закрывалось закругленными углами устройства (углами), корпусом датчика (корпусом датчика, полной челкой) и индикатором «Домой» внизу. Другими словами, контент, который мы разрабатываем для отображения, должен находиться в максимально возможной степени в безопасной зоне;
3. Адаптация iPhoneX --- Схема адаптации viewport-fit 3.1 Адаптация PhoneX, метатег viewport-fit используется в качестве схемы адаптации в iOS 11. Значением по умолчанию для viewport-fit является auto.Значение viewport-fit следующее:
| авто | По умолчанию: viewprot-fit:contain содержимое страницы отображается в безопасной области; |
| крышка | viewport-fit:cover, содержимое страницы заполняет экран |
Настройка метатега viewport-fit (при перекрытии)
<meta name=viewport content=width=device-width,initial-scale=1.0, минимальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=нет, viewport-fit=cover>
3.2 Введение в функцию CSS Constant() и безопасную область-вставка-верхнюю &безопасную-область-вставка-слева &безопасную-область-вставка-правая &безопасную-область-вставка-нижнюю
Как показано выше, WebKit в iOS 11 включает новую функцию CSS Constant() и набор из четырех предопределенных констант: Safe-area-inset-left, Safe-area-inset-right, Safe-area-inset-top и Safe. -область-вставка-дно. При объединении вместе стили позволяют ссылаться на размер безопасной области каждого аспекта.
3.1 Когда мы устанавливаем viewport-fit:contain, которое является временем по умолчанию; Параметры не имеют никакого эффекта.
3.2 Когда мы устанавливаем viewport-fit:cover: настройки следующие:
body { padding-top:constant(safe-area-inset-top); //Высота панели навигации + строка состояния составляет 88 пикселей paping-left:constant(safe-area-inset-left); //Если экран не вертикально. Is 0 padding-right:constant(safe-area-inset-right); //Если экран не вертикальный, это 0 padding-bottom: константа(safe-area-inset-bottom);//Высота нижней дуги равна 34 пикселя } 4. Адаптация iPhoneX --- статистика высотыviewport-fit: обложка + панель навигации
5. Адаптация iPhoneX --- медиа-запросОбратите внимание, что здесь используется 690 пикселей (высота безопасной области), а не 812 пикселей;
@media только экран и (ширина: 375 пикселей) и (высота: 690 пикселей) { body { background: blue }} 6.iphoneX подходит для видового экрана Краткое описание проблемы1. Когда на странице iphoneX используются градиентные цвета, if viewport-fit:cover;
1.1 Разница между одним цветом и цветом градиента устанавливается, когда установлен цвет фона. Если это один цвет, он заполнит весь экран. Если установлен цвет градиента, он будет отображаться только на высоте. дочерний элемент и высота страницы составляет всего 690 пикселей. Используйте указанный выше отступ-top:88px;
Тело фиксируется:
<body><div class=content>это подэлемент</div></body>
1. В монохромном режиме:
* { дополнение: 0; поля: 0; } тело { фон: зеленый; дополнение-верх: константа (безопасная область-вставка-топ); // 88 пикселей / * отступ-влево: константа (безопасная область-вставка-слева); );*/ /*padding-right:constant(safe-area-inset-right);*/ /*padding-bottom:constant(safe-area-inset-bottom);*/ }2. Градиент цвета
* {padding: 0; Margin: 0; } body {background:-webkit-gradient(linear, 0 0, 0 low, from(#ffaa22)), to(#ffaa22)); -inset-top); //88px /*padding-left: константа(safe-area-inset-left);*/ /*padding-right: Constant(safe-area-inset-right);*/ /*padding-bottom:constant(safe-area-inset-bottom);*/ }Как решить проблему использования градиентного цвета для заполнения всего экрана в настройках CSS, заключается в следующем:
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>Разработка веб-сайтов для iPhone X: соблюдение безопасных зон</title> <style> * {padding: 0; поля: 0; } html, body {height: 100%; body {padding-top:constant(safe-area-inset-top); константа (безопасная область-вставка-слева); дополнение-право: константа (безопасная-область-вставка-право); дополнение-дно: константа (безопасная область-вставка-дно); градиент (линейный, 0 0, 0 снизу, от (#ffd54f), до (#ffaa22)); ширина: 100%; высота: 724 пикселей; </style></head><body><div class=content>это подэлемент</div></body></html>2. Элемент страницы использует фиксированную адаптацию позиционирования: {position:fixed;}
2.1 Когда страница дочернего элемента зафиксирована внизу; при использовании viewport-fit:contain вы можете видеть, что когда отображается нижний:0, он будет отображаться только в безопасной области;
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>Проектирование веб-сайтов для iPhone X: соблюдение безопасных зон</title> <style> * { padding: 0; Margin: 0 } /*html,body {*/ /*height: 100%;*/ /*}*/ body { background: grey; /*padding-top:constant(safe-area-inset-top);*/ /*padding-left:constant(safe-area-inset-left); );*/ /*padding-right:constant(safe-area-inset-right);*/ /*padding-bottom:constant(safe-area-inset-bottom);*/ } .top { width: 100%; высота: 44 пикселя; фон: фиолетовый; } .bottom { позиция: фиксированная; слева: 0; справа: 0; цвет: черный; фон: зеленый } </style></ head><body> <div class=top>это верх</div> <div class=bottom>это низ</div></body></html>2.1 Когда страница дочернего элемента зафиксирована внизу; при использовании viewport-fit:cover вы можете видеть, что Bottom:0 будет отображаться только в безопасной области;
Добавьте html,body {ширина:100%;высота:100%}
Рисунок 1:
* { прокладка: 0; маржа: 0; } html,body { высота: 100%; } тело { фон: серый; отступ-верх: константа (безопасная область-вставка-слева); область-вставка-слева); заполнение-право: константа (безопасная область-вставка-право); заполнение-нижнее: константа (безопасная область-вставка-дно); ширина: 100%; высота: 44 пикселя; } .bottom { позиция: фиксированная; слева: 0; справа: 0; цвет: черный;Рисунок 2:
* {padding: 0; Margin: 0; } html,body {height: 100%; } body {background: Grey; Padding-top: Constant (safe-area-Inset-Top); область-вставка-слева); отступ-правый: константа (безопасная-область-вставка-правая); /* отступ-нижний: константа (безопасная-область-вставка-дно); */ } .top { ширина: 100%; высота: 44 пикселя; фон: фиолетовый; .bottom { позиция: фиксированная; слева: 0; высота: 44 пикселя; цвет: чёрный; фон: зелёный;2.3 Решение проблемы со слоем маски всплывающего окна alertView
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, начальный масштаб=1.0, минимальный масштаб=1.0 , максимальный масштаб=1.0, масштабируемый пользователем=нет>--> <meta name=viewport content=width=ширина устройства,начальный масштаб=1,0, минимальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=нет, viewport-fit=cover> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px' </script> <style> * { поля: 0; } html,body { ширина: 100%; высота: 100%; тело {размер шрифта: 0.32rem; константа (вставка-безопасной области-вверху); отступ-слева: константа (вставка-безопасной области-слева); отступ-правый: константа (вставка-безопасной области-справа); отступ-нижний: константа (безопасная область); -inset-bottom); } .content { text-align: center } .testBut { маржа: 50 пикселей авто; высота: 44 пикселя; 1 пиксель сплошной темно-серый; контур: нет; выбор пользователя: нет; цвет фона: желтый } </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> <section class=content> <button class=testBut onclick=showLoading()>Загрузка всплывающего окна</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Теплое напоминание, //Содержание заголовка: срок действия VIP-членства истекает, //Получить новый isKnow: false }); var xx = новый UIAlertView(); console.log(xx); Подвести итогВышеупомянутое редактор рассказывает вам об адаптации страниц HTML5 для iPhoneX. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!