У меня есть такой код:
<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
элемент -элемент. И не уменьшает масштаб после выбора чего-либо.
Как я могу предотвратить это? Или уменьшить масштаб?
javascript
css
html
iphone-web-app
Сеймар
источник
источник
$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');
user-scaleable = no - это то, что вам нужно, так что на этот вопрос есть окончательный ответ
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
источник
minimum-scale=1
, что также сохраняет возможность масштабирования пользователя.В моем случае это сработало при решении этой проблемы:
@media screen and (-webkit-min-device-pixel-ratio: 0) { select:focus, textarea:focus, input:focus { font-size: 16px; } }
Предлагаемый здесь по Кристина Arasmo Beymer
источник
iPhone будет немного увеличивать поля формы, если размер текста меньше 16 пикселей . Я бы предложил установить текст поля мобильной формы на 16 пикселей, а затем переопределить размер обратно для рабочего стола.
Ответы об отключении масштабирования бесполезны для слабовидящих пользователей, которые все еще могут захотеть увеличить масштаб на небольших мобильных устройствах.
Пример:
источник
Я немного опоздал на вечеринку, но я нашел довольно изящный обходной путь, который решает эту проблему только с помощью манипуляций 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 }
Я надеюсь, что это помогает!
источник
Попробуй это:
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
источник
iOS масштабирует страницу, чтобы отобразить поле ввода большего размера, если его размер шрифта меньше 16 пикселей.
только При щелчке по любому полю страница масштабируется. поэтому при нажатии мы делаем его как 16 пикселей, а затем меняем на значение по умолчанию
нижеприведенный фрагмент мне подходит и ориентирован на мобильные устройства,
@media screen and (max-width: 767px) { select:active, input:active,textarea:active{ font-size: 16px; } }
источник
Установите для всех шрифтов '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 по умолчанию:
Это также будет работать с другими элементами, получившими особый стиль, например 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',''); }); })
источник