Запретить iPhone увеличивать `select` в веб-приложении

Question

У меня есть этот код:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Запуск в полноэкранном веб-приложении на iPhone.

При выборе чего-либо из этого списка iPhone увеличиваетselect -элементное.И не уменьшает масштаб после выбора чего-либо.

Как я могу предотвратить это?Или уменьшить масштаб?

Answer 1

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

Если задать метатег атрибута "user-scalable = no", пользователь не сможет изменять масштаб в другом месте. Поскольку проблема связана только с select element, попробуйте использовать следующее в вашем css, этот хак изначально используется для jquery mobile.

HTML:

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

CSS:

select{
font-size: 50px;
}

src: unzoom после выбора в iphone

Answer 2

user-scalable = no - это то, что вам нужно, так что на этот вопрос есть однозначный ответ

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

Answer 3

Это, похоже, сработало для моего случая при решении этой проблемы:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

Предложено здесь Кристина Арасмо Беймер

Answer 4

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

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

Пример:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Answer 5

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

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

Например, давайте возьмем пример, когда наш текст 14px, поэтому он масштабируется, потому что он меньше 16px. Поэтому мы можем преобразовать масштаб в соответствии с 0,875.

В следующем примере я добавил отступы, чтобы показать, как соответствующим образом преобразовать другие свойства.

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

Надеюсь, это поможет!

Answer 6

Попробуйте это:

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom будет запущен до замены, поэтому увеличение будет отключено во время запуска обмена. В конце функции onchange вы можете восстановить исходную ситуацию.

Проверено на iPhone 5S

Answer 7

iOS изменяет масштаб страницы, чтобы увеличить поле ввода, если его размер шрифта меньше 16px.

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

фрагмент ниже работает нормально для меня и ориентирован на мобильные устройства,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

Answer 8

Я не думаю, что вы ничего не можете сделать с поведением в изоляции.

Одна вещь, которую вы можете попробовать, это вообще не увеличивать масштаб страницы. Это хорошо, если ваша страница предназначена для телефона.

<meta name="viewport" content="width=device-width" />

Еще одна вещь, которую вы можете попробовать, - это использовать конструкцию JavaScript вместо общего выражения «select». Создайте скрытый div, чтобы показать ваше меню, обработайте клики в javascript.

Удачи!

Answer 9

Читал в течение нескольких часов об этом, и лучшее решение - это jquery здесь. Это также помогает с опцией «Следующая вкладка» в iOS Safari. У меня также есть входные данные, но вы можете удалить их или добавить по своему усмотрению. По сути, mousedown срабатывает перед событием фокуса и заставляет браузер думать, что его 16px. Кроме того, фокусировка сработает на функции «следующая вкладка» и повторит процесс.

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})

Answer 10

Попробуйте добавить этот CSS, чтобы отключить стиль Ios по умолчанию:

-webkit-appearance: none;

Это также будет работать с другими элементами, которые получают специальные стили, такие как input [type = search].