Предотвратите изменение размера iPhone в `select` в веб-приложении

Ответ 1

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

Предоставление атрибута metatag "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: unzoom после выбора в iphone

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Пример:

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

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

Ответ 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
}

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

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

Протестировано на iPhone 5S

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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

Удачи!

Ответ 9

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

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

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

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

Ответ 10

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

-webkit-appearance: none;

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

Ответ 11

Читал в течение нескольких часов об этом, и лучшее решение - это 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','');
    });
})

Ответ 12

Установите размер шрифта "выберите" на 16 пикселей

Выбрать{ размер шрифта: 16 пикселей; }