HTML без увеличения на мобильном телефоне

Question

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Я добавил этот код, но это не мешает. Есть идеи?

Answer 1

Это вызвано тем, что сайт думает, что ориентация изменилась с книжной на альбомную из-за открытой клавиатуры.

Клавиатура покрывает часть сайта, которая занимает экранную область, что приводит к достаточному изменению разрешения, чтобы его можно было обнаружить в ландшафтном режиме. Если клавиатура как-то скрыта или подключена клавиатура Bluetooth, сайт выглядит корректно. Я приложил скриншоты, чтобы проиллюстрировать проблему.

После некоторых поисков, я нашел этот сайт. Похоже, что добавление orientation Медиа-запрос может решить эту лазейку разрешения. Вот их пример для iPhone 6 в портретной:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Обновление: также проверьте эту страницу CSS-хитрости, они имеют аналогичную информацию с более кросс-платформенными примерами.

---

С открытой клавиатурой:

Со скрытой клавиатурой (я смоделировал это, подключив клавиатуру Bluetooth):