У меня есть такой код:
<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элемент -элемент. И не уменьшает масштаб после выбора чего-либо.
Как я могу предотвратить это? Или уменьшить масштаб?
Ответы:
Вероятно, это связано с тем, что браузер пытается увеличить область, поскольку размер шрифта меньше порогового значения, обычно это происходит на 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;
}
$('<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 пикселей, а затем переопределить размер обратно для рабочего стола.
Ответы об отключении масштабирования бесполезны для слабовидящих пользователей, которые все еще могут захотеть увеличить масштаб на небольших мобильных устройствах.
Пример:
# 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
}
Я надеюсь, что это помогает!
Попробуй это:
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;
}
}Я не думаю, что вы ничего не можете сделать с поведением в одиночку.
Одна вещь, которую вы можете попробовать, - это вообще не допускать масштабирования страницы. Это хорошо, если ваша страничка рассчитана на телефон.
<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','');
});
})