5 встречающихся ошибок, которые должен знать разработчик.

#1 Link outlines / highlights смещаются Kindle Fire

Проблема:

Fix:

text-rendering: optimizeLegibility;
position: relative;
-webkit-box-sizing: border-box;

#2 Баг с зумом при смене ориентации на iOS

Решение:

(function(a){function m(){d.setAttribute("content",g),h=!0}function n(){d.setAttribute("content",f),h=!1}function o(b){l=b.accelerationIncludingGravity,i=Math.abs(l.x),j=Math.abs(l.y),k=Math.abs(l.z),(!a.orientation||a.orientation===180)&&(i>7||(k>6&&j5)?h&&n():h||m()}var b=navigator.userAgent;if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&/OS [1-5]_[0-9_]* like Mac OS X/i.test(b)&&b.indexOf("AppleWebKit")>-1))return;var c=a.document;if(!c.querySelector)return;var d=c.querySelector("meta[name=viewport]"),e=d&&d.getAttribute("content"),f=e+",maximum-scale=1",g=e+",maximum-scale=10",h=!0,i,j,k,l;if(!d)return;a.addEventListener("orientationchange",m,!1),a.addEventListener("devicemotion",o,!1)})(this);

#3 WebKit игнорирует цвет фона элемента при печати документа

Решение:

-webkit-print-color-adjust: exact;

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

Проблема:

Если вы нажимаете на пункт слишком долго следующее диалоговое окно будет всплывать на мобильных устройствах:

Чтобы убрать такое поведение добавтье:

-webkit-touch-callout: none;
-moz-touch-callout: none;
touch-callout: none;

#4 Настройка страницы при добавлении на главный экран iOS

Используйте следующие теги для настройки значка приложения:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

Для настройки имени вашего приложения:

<meta name="apple-mobile-web-app-title" content="CUSTOM SHORT NAME">

Для работы в полноэкранном режиме

<meta name="apple-mobile-web-app-capable" content="yes" />

Настройка цвета строки состояния, когда ваше приложение активно:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Добавление заставки, при открытии приложения:

<link rel="apple-touch-startup-image" href="https://altyncev.ru/startup.png">

#5 Снимаем пунктирные контуры полей выбора в Firefox

select:-moz-focusring { color: transparent; }