Запретить iPhone увеличивать масштаб при выборе в веб-приложении

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

Присвоение атрибута метатега «user-scalable = no» ограничивает возможность масштабирования в другом месте. Поскольку проблема связана только с элементом select, попробуйте использовать следующее в своем 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: уменьшить масштаб после выбора на iphone

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

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

В моем случае это сработало при решении этой проблемы:

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

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

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

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

Пример:

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

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

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

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

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

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

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

Я надеюсь, что это помогает!

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

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

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

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

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

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, поэтому масштабирование будет отключено во время включения onchange. На функции onchange в конце вы можете восстановить исходную ситуацию.

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

Установите для всех шрифтов 'select' размер 16 пикселей

выберите {font-size: 16px; }

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

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

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

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

Удачи!

Как здесь ответили: Отключить автоматическое увеличение Тег ввода текста - Safari на iPhone

Вы можете запретить Safari автоматически увеличивать масштаб текстовых полей во время ввода данных пользователем без отключения возможности масштабирования пользователем с помощью щипка. Просто добавьте maximum-scale=1, но не учитывайте атрибут масштаба пользователя, предложенный в других ответах.

Это полезный вариант, если у вас есть форма в слое, которая «плавает» вокруг при увеличении, что может привести к тому, что важные элементы пользовательского интерфейса будут перемещены за пределы экрана.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

-webkit-appearance: none;

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

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

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