Решение: iPhone увеличивает select в веб-приложении, как исправить?

Быстрый ответ

Если вам требуется устранить нежелательное увеличение в Safari, это можно сделать одним из следующих способов:

select {
    /* Высокоэффективное решение! При размере шрифта 16px и выше увеличение не происходит. */
    font-size: 16px;
}

или

<!-- Применяется для отмены увеличения -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Тем не менее, стоит вникнуть в некоторые тонкости, которые здесь присутствуют...

Критический баланс: удобство использования против доступности

Использование user-scalable=no решает проблему с масштабированием, однако следует учесть, что некоторым пользователям может понадобиться возможность увеличения текста для его удобного чтения. Важно найти баланс между удобством использования и доступностью сведений. Поэтому идеальным будет адаптивный размер шрифта.

Быть адаптивным означает корректировать размер шрифта на больших экранах для комфортного чтения, избегая при этом увеличения на iPhone. Похоже, Apple обожает усложнять задачи.

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

Начнем с мобильно-ориентированного дизайна, установив размер шрифта для элемента select равным 16px для мобильных пользователей, и применим медиа-запросы для адаптации под широкие экраны:

/* Для любителей продукции Apple */
select {
    font-size: 16px;  /* Apple направляет нас на этот стандарт. */
}

/* Для больших экранов */
@media (min-width: 768px) {
    select {
        font-size: 18px; /* Регулируется по вашему усмотрению. */
    }
}

С помощью такого подхода мы устраняем увеличение на мобильных устройствах и мы удовлетворяем пользователя с большими (настольными) устройствами удобной читаемостью текста.

В большом размере шрифта кроются тонкости

Безусловно, выбор размера шрифта в 16px для мобильной версии может негативно сказаться на общем стиле дизайна, и в результате вы можете остаться разочарованы. Это подобно обуви, которая мала. Однако здесь к вашим услугам масштабирование в CSS, которое позволяет визуально сократить размер текста, не вызывая при этом масштаба.

select {
    font-size: 16px;
    /* Увеличение не будет происходить, как будто оно под лупой. К сожалению! */
    transform: scale(0.75);
    transform-origin: top left;
}

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

Когда увеличительное стекло в руке детектива

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

select {
    font-size: 16px;
    /* Даже Шерлок Холмс не узнает, что это 16px! */
    transform: scale(0.75);
    transform-origin: top left;
    padding: 10px; /* Все ради комфорта */
    margin: -5px; /* Чтобы выделиться и расширять рамки */
}

Может создаться впечатление, что это излишние манипуляции ради внешнего вида за счет функциональности. Да, это так, но и то, и другое нельзя игнорировать.

Общая картина: улучшаем удобство использования

Напоминаю вам, что все эти манипуляции производятся специально для iPhone. Другие устройства и браузеры могут не поддерживать указанные стили, или их поведение может отличаться, вызывая непредвиденные эффекты. Поэтому всегда проверяйте работу разработанного на различных платформах и в разных браузерах, чтобы обеспечить универсальную совместимость.

Браузеры обновляются на регулярной основе, добавляя вам новые заботы. Обращайте особое внимание на релиз-ноуты, особенно для Safari на iPhone, чтобы быть в курсе всех изменений. Использование таких ресурсов как, например, блог WebKit, поможет вам оставаться на передовой всех событий.

Как гласит поговорка: если стрелять в луну, то можно и не попасть в цель, но все равно окажешься среди звезд. Старайтесь сначала создать что-то полезное для всех, а затем усовершенствуйте в конкретных ситуациях. Проверьте поддержку функций через CSS:

@supports (transform: scale(1)) {
    select {
        /* Эти стили будут применены только там, где это возможно */
    }
}

Визуализация

Вот простая и наглядная визуализация идеи предотвращения увеличения элемента select в веб-приложении на iPhone:

Представьте элемент select как наличные деньги (💰), а увеличение на iPhone — как нежелательную комиссию в банке (🚫💸).

Стандартное взаимодействие: 💰 ←→ 👀

Увеличение при взаимодействии: 🚫💸 -> 💰

Мы ставим целью отсутствие комиссий (🚫💸):

select {
    /* Комиссия? Не сегодня! */
    font-size: 16px;
}

Полезные материалы

1. New Interaction Behaviors in iOS 10 | WebKit — Изучите особенности изменений интерактивного поведения в обновлении iOS 10.
2. Disable Auto Zoom in Input "Text" tag – Safari on iPhone – Stack Overflow — Рекомендую прочитать обсуждение сообщества, где обсуждается, как предотвратить автоматическое увеличение на iPhone в полях ввода.
3. HTML Standard — Стандартные положения по работе и атрибутам элемента select.
4. Supported Meta Tags — Подсказки от Apple для разработчиков о том, как использовать мета-теги наилучшим образом.
5. Get the size of the screen, current web page and browser window – Stack Overflow — Обзор технических обсуждений на публичном ресурсе, где обсуждаются вопросы масштабирования экрана и окна браузера.