mobile.md

Особенности разработки сайта под мобильные устройства

Статус: черновик.

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

Список особенностей

• Вьюпорт Android 2.3 - либо фикс, либо 1:1, с minimal-ui не дружит - ломается (не проверено точно).

• iOS кинетически скроллится за пределы, можно видеть не тот фон.

• position fixed - от вьюпорта.

• Android 2.3 - transform rotate + display block.

• Android 2.3 - border-radius px.

• Android 4.0 - font-size 0 - не работает, не проверена работоспособность с font-size .000001px, также есть запасной вариант на случай, если должно быть только в одну строку - display inline-block + white-space nowrap родителю, второй вариант - использовать float left, а для центрирования родителю display table + margin-left auto + margin-right auto.

• Android 4.0 - vertical-align top для display table

• При смене ориентации в iOS появляется серая полоса внизу, фиксистся проскролливанием вверх $('html, body').scrollTop(0).

• @media screen and (orientation: landscape) срабатывает когда появляется клавиатура на Android.

• <link href="" media=""> не работает на ios 6 и меньше, грузит все стили, но отрисовывает только один, костыль в этом случае встраивание стилей в страницу с перечислением @import и медиа-запросов, пример: @import url(path/to/style.css) only screen and(max-width: 640px); и нужное количество таких строк с разными условиями под каждый экран.

• При использовании Яндекс.Карт с находящимися рядом чекбоксами со свойствами ниже, почти сразу или при перетаскивани карты браузер Safari может вылетать.

    width 0
    height 0
    overflow hidden
    opacity 0

  Решение: нужно скрывать в display none.

• Yandex Browser не поддерживает ссылку с номером телефона href="tel:", рещение - костылить в JS.