Различные проблемы с адаптацией мобильного терминала

внешний интерфейс Безопасность Apple CSS

Подгонка, ты знаешь подгонку?

мыслительные вопросы

Одинаков ли размер элемента div размером 100x100 пикселей на Apple 6 и Apple 6p?

наука

  • px, единичный пиксель
  • дп, физические пиксели
  • dpr, соотношение пикселей устройства
  • ppi, сколько полезных пикселей на дюйм

Единичный пиксель является относительной единицей

На одном и том же устройстве можно изменить физический пиксель, представленный каждым пикселем CSS (то есть относительность первого аспекта пикселей CSS);

Между различными устройствами физический пиксель, представленный каждым пикселем CSS, может быть изменен (то есть относительность второго аспекта пикселей CSS);

Почему дизайнерские проекты чаще всего выбирают iphone6

С выпуском Apple большего размера мобильных телефонов с большим экраном в сочетании с запутанным разнообразием странных размеров в экосистеме Android мобильный дизайн полностью вступил в эру «разных экранов».

Не иначе как iPhone 6 является просто представителем мобильного телефона среднего размера, а настройка интерфейса минимальна при адаптации от среднего размера вверх и вниз.

Как мы адаптируемся в эпоху мобильных устройств?

Используйте rem для адаптации страницы

var dc = document.documentElement;

var mt = document.createElement("meta");
mt.name = "viewport";
mt.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";
dc.firstElementChild.appendChild(mt);

var autoSizie = function () {
    var dw = dc.clientWidth;
    var dpr = Math.min(window.devicePixelRatio, 3);
    //dw / dpr > 750 && (dw = 750 * dpr);
    window.remScale = dw / 750;
    dc.style.fontSize = 200 * (dw / 750) + "px";
    dc.dataset.dpr = dpr;
};
autoSizie();
window.addEventListener('resize', autoSizie, false);
  • Почему 200 * (document.documentElement.clientWidth/750) + "px"?

На некоторых моделях дрожит анимация кадра.

решение:

1. Анимируйте исходный размер, а затем используйте transform:scale() для масштабирования.
2. Используйте альтернативы svg, рекомендуемые решения

Используйте единицу измерения окна просмотра vw, чтобы она соответствовала размеру страницы.

div {
    width: 10vw;
    height: 10vw;
    font-size: .12vw;
}

Хотя такая страница выглядит хорошо, вы обнаружите, что, поскольку это макет, реализованный с использованием единиц измерения окна просмотра, он автоматически масштабируется в зависимости от размера окна просмотра. , Рот слишком большой или слишком маленький, теряются ограничения по максимальной и минимальной ширине.

Решение: Объедините единицы rem для получения макета

1. Установите единицу vw для изменения размера корневого элемента вместе с окном просмотра, чтобы он мог динамически изменять свой размер.
2. Ограничьте максимальный и минимальный размер шрифта корневого элемента, с телом плюс максимальную ширину и минимальную ширину

Как сделать горизонтальную экранизацию

Отслеживайте событие изменения размера экрана и поворачивайте весь корневой контейнер на 90 градусов против часовой стрелки CSS3, когда он считается вертикальным экраном.

var detectOrient = function() {
  var width = document.documentElement.clientWidth,
      height =  document.documentElement.clientHeight,
      $wrapper =  document.getElementById("J_wrapper"),
      style = "";
  if( width >= height ){ // 横屏
      style += "width:" + width + "px;";  // 注意旋转后的宽高切换
      style += "height:" + height + "px;";
      style += "-webkit-transform: rotate(0); transform: rotate(0);";
      style += "-webkit-transform-origin: 0 0;";
      style += "transform-origin: 0 0;";
  }
  else{ // 竖屏
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋转中点的处理
      style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  }
  $wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();

Решить проблему адаптации dom горизонтального экрана

$vw_base: 375;
$vw_fontsize: 20;
html {
  font-size: 20px; //不支持vw单位时，回退到px单位
  font-size: ($vw_fontsize / $vw_base) * 100vw;
}
@media screen and (orientation: landscape) {
  html {
    font-size: 20px;
    font-size: ($vw_fontsize / $vw_base) * 100vh;
  }
}

Адаптация веб-страницы iPhoneX

viewport-fit

Новая особенность IOS11, для того, чтобы адаптировать к расширению существующего мета-тега IPhoneX, Apple может установить три значения:

  • содержат: видимое окно полностью содержит веб-контент
  • обложка: содержимое веб-страницы полностью закрывает видимое окно
  • auto: значение по умолчанию, совместимое с содержанием

env() и константа()

Новая функция iOS11, функция CSS Webkit, используется для установки расстояния между безопасной зоной и границей.Есть четыре предопределенных переменных:

  • safe-area-inset-left: расстояние от безопасной зоны до левой границы
  • safe-area-inset-right: расстояние от безопасной зоны до правой границы
  • safe-area-inset-top: расстояние от верхней границы безопасной области
  • safe-area-inset-bottom: расстояние от нижней границы безопасной области
// 需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 根据情况设置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

Вот и все, что касается мобильной адаптации.
Дорога длинна и длинна, я буду ходить вверх и вниз и искать...

Категории