Сводка общих ошибок мобильного терминала 001

внешний интерфейс JavaScript iOS Webkit

предисловие

Эта статья представляет собой выдержку и сопоставление некоторых распространенных ошибок и решений для мобильных терминалов.Первая статья будет обновлена ​​и систематизирована позже.

вспышка в стиле щелчка

В: Когда вы нажимаете на ссылку или интерактивный элемент, определенный Javascript, он отображается на полупрозрачном сером фоне.

О: Основной причиной является -webkit-tap-highlight-color.Этот атрибут используется для установки цвета фоновой рамки ответа, когда элемент запускается событием клика на мобильном устройстве (например, Adnroid, iOS). . Рекомендуется писать его в инициализации стиля, чтобы избежать всех проблем: div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);} Кроме того, появляется синяя рамка : контур: нет;

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-webkit-tap-highlight-color : transparent ;

Блокировать выбор пользователя

В: Запретить пользователям выбирать текст или изображения на странице

О: код выглядит следующим образом

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Как убрать тень в поле ввода на мобильном терминале

В: В iOS поле ввода по умолчанию имеет внутреннюю тень, но ее нельзя очистить с помощью box-shadow.Если вам не нужна тень, вы можете отключить ее следующим образом:

О: код выглядит следующим образом

-webkit-appearance: none;

Отключить масштабирование текста

Q: Отключить масштабирование текста

О: код выглядит следующим образом

-webkit-text-size-adjust: 100%;

Как запретить сохранение или копирование изображений

В: Как запретить сохранение или копирование изображений

О: код выглядит следующим образом

img{
-webkit-touch-callout: none;}

Решить проблему, из-за которой шрифты выглядят зубчатыми после уменьшения масштаба мобильного терминала.

В: Решить проблему, из-за которой шрифт выглядит неровным после уменьшения масштаба на мобильном терминале.

О: код выглядит следующим образом

-webkit-font-smoothing: antialiased;

Установите размер шрифта-заполнителя во входных данных

В: Установите размер шрифта-заполнителя во входных данных.

О: код выглядит следующим образом

::-webkit-input-placeholder{ font-size:10pt;}

аудиоэлемент и видеоэлемент не могут автоматически воспроизводиться в ios и andriod

В: Элемент аудио и элемент видео не могут воспроизводиться автоматически в ios и andriod.

A: Код выглядит следующим образом, коснитесь экрана и играйте.

$('html').one('touchstart',function(){
audio.play()
})

Фотосъемка и загрузка фотографий с мобильного телефона

В: Добавьте разные поля принятия для типов файлов

О: код выглядит следующим образом

<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

Цвет автозаполнения поля ввода

В: Для введенного тега ввода желтый фон будет заполнен введенным содержимым. Это автоматически добавляется ядром webkit. Соответствующий атрибут — автозаполнение, значение по умолчанию включено, а соответствующий стиль — input:-webkit-autofill и является неизменным.

效果图

Ответ: План следующий. 1 Установите автозаполнение метки = «выкл», тест pro может быть недействительным 2 Установите для внутренней тени коробки обычный цвет (в качестве примера ниже выберите белый)

 box-shadow:0 0  0 1000px  #fff inset ;
 -webkit-box-shadow: 0 0 0px 1000px #fff inset;

Включить аппаратное ускорение

Q: Оптимизация производительности рендеринга

О: код выглядит следующим образом

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

Пользователь увеличивает или уменьшает размер шрифта, что приводит к неправильному макету страницы.

 body  
    {  
        -webkit-text-size-adjust: 100% !important;  
        text-size-adjust: 100% !important;  
        -moz-text-size-adjust: 100% !important;  
    }

Уберите стрелку с номером типа на мобильном терминале

 input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
      -webkit-appearance: none !important;
      margin: 0; 
  }

Решение для реализации горизонтального экрана и вертикального экрана

  • CSS использует медиа-запрос CSS3, недостатком является то, что ширину и высоту не так просто контролировать.

    @media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
        overflow: hidden;
    }
}

@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

  • js для определения ориентации экрана или события изменения размера

    	 var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){

            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }

    }, false);

использованная литература:css или js для реализации схемы горизонтального экрана и вертикального экрана

использованная литература

Категории