Я создал HTML-страницу с <input> с type="text". Когда я нажимаю на нее, используя Safari на iPhone, страница становится больше (автомасштабирование). Кто-нибудь знает, как отключить это?
Отключить автоматическое увеличение входного тега "Текст" - Safari на iPhone
Ответ 1
Браузер будет увеличиваться, если размер шрифта меньше 16 16px а размер шрифта по умолчанию для элементов формы - 11 11px (по крайней мере, в Chrome и Safari).
Кроме того, элемент select должен иметь прикрепленный focus псевдокласс.
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
Нет необходимости использовать все вышеперечисленное, вы можете просто нарисовать элементы, которые вам нужны, например: просто text, number и textarea:
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
Альтернативное решение для ввода входных элементов из родительского стиля:
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
Ответ 2
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
Новое: IOS по-прежнему будет масштабироваться, если вы не используете 16px на входе без фокуса.
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
Я добавил фон, поскольку IOS не добавляет фона для выбора.
Ответ 3
Вы можете запретить Safari автоматически увеличивать текстовые поля во время ввода данных пользователем, не отключая возможность увеличения масштаба. Просто добавьте maximum-scale=1 но не указывайте атрибут пользовательского масштаба, предложенный в других ответах.
Это полезный вариант, если у вас есть форма в слое, которая "плавает" при увеличении, что может привести к тому, что важные элементы пользовательского интерфейса переместятся за пределы экрана.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Ответ 4
Если ваш сайт правильно разработан для мобильного устройства, вы можете решить не разрешать масштабирование.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Это решает проблему, что ваша мобильная страница или форма будет "плавать".
Ответ 5
В заключение ответ: установите размер шрифта элементов формы как минимум 16px
Ответ 6
input[type='text'],textarea {font-size:1em;}
Ответ 7
Правильный способ исправить эту проблему - изменить meta viewport на:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>Ответ 8
Нет никакого чистого пути, который я мог бы найти, но вот взлом...
1) Я заметил, что событие mouseover происходит до масштабирования, но масштабирование происходит до событий mousedown или focus.
2) Вы можете динамически изменять тег viewport META с помощью javascript (см. Включить/отключить масштабирование iPhone Safari с помощью Javascript?)
Итак, попробуйте это (показано в jquery для компактности):
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
Это, безусловно, хак... могут быть ситуации, когда mouseover/down не всегда захватывают записи/выходы, но он хорошо работал в моих тестах и является надежным началом.
Ответ 9
Недавно (сегодня: D) мне пришлось интегрировать это поведение. Чтобы не влиять на исходные поля дизайна, включая комбо, я решил применить преобразование в фокусе поля:
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
Ответ 10
Добавьте user-scaleable = 0 в метафайл просмотра как следующий
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
Работал для меня:)
Ответ 11
Javascript hack, который работает на iOS 7. Это основано на ответе @dlo, но события mouseover и mouseout заменяются событиями touchstart и touchhend. В основном это script добавляет половину тайм-аута до того, как масштабирование снова включится, чтобы предотвратить масштабирование.
$("input[type=text], textarea").on({ 'touchstart' : function() {
zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
setTimeout(zoomEnable, 500);
}});
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
Ответ 12
Это сработало для меня:
input, textarea {
font-size: initial;
}
Ответ 13
Я использовал решение Christina выше, но с небольшой модификацией для бутстрапа и другим правилом для применения к настольным компьютерам. Размер шрифта Bootstrap по умолчанию - 14 пикселей, что вызывает увеличение. Следующее изменяет его на 16px для "элементов управления формой" в Bootstrap, предотвращая увеличение.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.form-control {
font-size: 16px;
}
}
И вернемся к 14px для немобильных браузеров.
@media (min-width: 768px) {
.form-control {
font-size: 14px;
}
}
Я попытался использовать .form-control: focus, который оставил его на 14px, за исключением фокуса, который изменил его на 16 пикселей, и он не устранил проблему масштабирования с iOS8. По крайней мере, на моем iPhone с помощью iOS8 размер шрифта должен быть 16 пикселей, прежде чем фокусироваться на iPhone, чтобы не увеличивать страницу.
Ответ 14
Я сделал это, также с jQuery:
$('input[type=search]').on('focus', function(){
// replace CSS font-size with 16px to disable auto zoom on iOS
$(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
// put back the CSS font-size
$(this).css('font-size', $(this).data('fontSize'));
});
Конечно, некоторые другие элементы интерфейса могут быть адаптированы, если этот размер шрифта 16px нарушает дизайн.
Ответ 15
По прошествии некоторого времени я придумал это решение
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
В "mousedown" он устанавливает размер шрифта в 16px. Это предотвратит масштабирование. В случае фокуса он меняет размер шрифта обратно на начальное значение.
В отличие от ранее опубликованных решений, это позволит вам установить размер шрифта для ввода, который вы хотите.
Ответ 16
Прочитав почти каждую строчку здесь и протестировав различные решения, это благодаря всем, кто поделился своими решениями, что я придумал, испытал и работал у меня на iPhone 7 iOS 10.x:
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: initial;}
}
@media (min-width: 768px) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: inherit;}
}
У этого есть некоторые минусы, хотя, заметно "прыжок" в результате быстрого изменения размера шрифта, происходящего между состояниями "зависания" и "фокуса", а также влиянием перерисовки на производительность
Ответ 17
Псевдоэлементы, такие как :focus, не работают, как раньше. Начиная с iOS 11, простое объявление сброса может быть добавлено перед вашими основными стилями (при условии, что вы не переопределите их с меньшим размером шрифта).
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
Стоит отметить, что для библиотек CSS, таких как Tachyons.css, легко случайно изменить размер шрифта.
Например, class: f5 эквивалентен: fontSize: 1rem, что хорошо, если вы сохранили масштаб шрифта основного текста по умолчанию.
Однако: если вы выберете класс размера шрифта: f6, это будет эквивалентно fontSize: .875rem на маленьком дисплее вверх. В этом случае вам нужно быть более точным в отношении деклараций сброса:
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
Ответ 18
Как уже указывалось во многих других ответах, этого можно достичь, добавив maximum-scale в метатег viewport. Однако это отрицательно сказывается на отключении пользовательского масштабирования на устройствах Android. (Это не отключает пользовательский масштаб на устройствах iOS начиная с v10.)
Мы можем использовать JavaScript для динамического добавления maximum-scale в мета viewport, когда устройством является iOS. Это позволяет достичь лучшего из обоих миров: мы позволяем пользователю увеличивать масштаб и не позволяем iOS масштабировать текстовые поля в фокусе.
| maximum-scale | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes | yes | yes | no |
| no | yes | no | yes |
| yes on iOS, no on Android | yes | yes | yes |
Код:
const addMaximumScaleToMetaViewport = () => {
const el = document.querySelector('meta[name=viewport]');
if (el !== null) {
let content = el.getAttribute('content');
let re = /maximum\-scale=[0-9\.]+/g;
if (re.test(content)) {
content = content.replace(re, 'maximum-scale=1.0');
} else {
content = [content, 'maximum-scale=1.0'].join(', ')
}
el.setAttribute('content', content);
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
Ответ 19
Кстати, если вы используете Bootstrap, вы можете просто использовать этот вариант:
.form-control {
font-size: 16px;
}
Ответ 20
Мне пришлось "исправить" автоматическое масштабирование в вопросе управления формами для веб-сайта голландского университета (который использовал 15px в формах управления). Я придумал следующий набор требований:
- пользователь должен по-прежнему
- размер шрифта должен оставаться тем же
- нет вспышек временного различного стиля
- нет требования jQuery
- должен работать на новейших iOS и не препятствовать любой другой комбинации устройств/устройств
- если возможно, магии тайм-аутов, а при необходимости правильно очистить таймеры
Это то, к чему я придумал:
/*
NOTE: This code overrides the viewport settings, an improvement would be
to take the original value and only add or change the user-scalable value
*/
// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
preventZoomOnFocus();
function preventZoomOnFocus()
{
document.documentElement.addEventListener("touchstart", onTouchStart);
document.documentElement.addEventListener("focusin", onFocusIn);
}
let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];
function onTouchStart(evt)
{
let tn = evt.target.tagName;
// No need to do anything if the initial target isn't a known element
// which will cause a zoom upon receiving focus
if ( tn != "SELECT"
&& tn != "TEXTAREA"
&& (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
)
return;
// disable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}
// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
// reenable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}
// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
if (vpnode)
vpnode.setAttribute("content",newvalue);
else
{
vpnode = document.createElement("meta");
vpnode.setAttribute("name", "viewport");
vpnode.setAttribute("content", newvalue);
}
}
Некоторые примечания:
- Обратите внимание, что до сих пор я тестировал его только на iOS 11.3.1, но вскоре проведу его на нескольких других версиях
- Использование событий focusIn означает, что для него требуется, по крайней мере, iOS 5.1 (но я вижу, что сайты, которые мы создаем, работают в версиях iOS старше 9 лет, как классный бонус)
- Использование event-delegation, потому что у многих сайтов, на которых я работаю, есть страницы, которые могут динамически создавать элементы управления формой
- Установка eventListeners в элемент html (documentElement), чтобы не дожидаться, пока тело станет доступным (не хотите беспокоиться о проверке готовности/загрузки документа или необходимости ждать события DOMContentLoaded)
Ответ 21
Я вижу, что люди здесь делают некоторые странные вещи с JavaScript или функцией просмотра и отключают все ручное масштабирование на устройствах. На мой взгляд, это не должно быть решением. Добавление этого фрагмента CSS отключит автоматическое масштабирование в iOS без изменения размера шрифта до фиксированного числа, такого как 16px.
По умолчанию я использую размер шрифта 93.8% (15px) в полях ввода, и, добавив мой фрагмент CSS, этот показатель составляет 93.8%. Не нужно менять значение 16px или сделать его фиксированным.
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
Ответ 22
Установление размера шрифта (для полей ввода), равного размеру шрифта тела, похоже, не позволяет обозревать браузеру или нет.
Я бы предложил использовать font-size: 1rem как более элегантное решение.
Ответ 23
Поскольку автоматическое масштабирование (без изменения масштаба) по-прежнему остается аннонированным на iPhone, здесь используется JavaScript на основе предложения dlo, работающего с фокусом/размытием.
Масштабирование отключается, как только текст вводится и повторно включается, когда вход остается.
Примечание.. Некоторые пользователи могут не редактировать тексты редактирования в небольшом текстовом вводе! Поэтому я лично предпочитаю изменять размер входного текста во время редактирования (см. Код ниже).
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function onBeforeZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "user-scalable=0";
}
}
function onAfterZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "width=device-width, user-scalable=1";
}
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
Следующий код изменит размер входного текста на 16 пикселей (рассчитывается, то есть в текущем размере масштабирования), когда элемент имеет фокус. Поэтому iPhone не будет автоматически увеличивать масштаб.
Примечание. Коэффициент масштабирования рассчитывается на основе окна window.innerWidth и iPhone с разрешением 320 пикселей. Это будет только для iPhone в портретном режиме.
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function getSender(evt, local) {
if (!evt) {
evt = window.event;
}
var sender;
if (evt.srcElement) {
sender = evt.srcElement;
} else {
sender = local;
}
return sender;
}
function onBeforeZoom(evt) {
var zoom = 320 / window.innerWidth;
var element = getSender(evt);
element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
var element = getSender(evt);
element.style.fontSize = "";
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
Ответ 24
Мне потребовалось некоторое время, чтобы найти его, но вот лучший код, который я нашел...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});
Ответ 25
Основываясь на Ответ Стивена Уолша... Этот код работает без изменения размера шрифта входов на фокус (который выглядит хромым), плюс он по-прежнему работает с FastClick, который я предлагаю добавить ко всем мобильным сайтам, чтобы помочь принести "мгновенный". Отрегулируйте "ширину видового экрана" в соответствии с вашими потребностями.
// disable autozoom when input is focused
var $viewportMeta = $('head > meta[name="viewport"]');
$('input, select, textarea').bind('touchend', function(event) {
$viewportMeta.attr('content', 'width=640, user-scalable=0');
setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
});
Ответ 26
Комментарий для верхнего ответа о настройке размера шрифта на 16 пикселей спросил, как это решение, что делать, если вы хотите увеличить/уменьшить шрифт.
Я не знаю о вас всех, но использование px для размеров шрифтов - не лучший способ, вы должны использовать em.
Я столкнулся с этой проблемой на моем отзывчивом сайте, где мое текстовое поле больше 16 пикселей. У меня был контейнер формы, равный 2rem, а мое поле ввода - 1.4em. В моих мобильных запросах я изменяю размер шрифта html в зависимости от области просмотра. Поскольку по умолчанию html равен 10, мое поле ввода вычисляет 28px на рабочем столе
Чтобы удалить автоматическое масштабирование, мне пришлось изменить свой ввод на 1.6em. Это увеличило мой размер шрифта до 32px. Чуть выше и едва заметно. На моем iPhone 4 и 5 я меняю свой размер шрифта html на 15 пикселей для портрета и обратно до 10 пикселей для пейзажа. Похоже, что сладкое пятно для этого размера пикселя составило 48 пикселей, поэтому я изменился с 1.4em (42px) до 1.6em (48px).
То, что вам нужно сделать, это найти сладкое пятно на размер шрифта, а затем преобразовать его назад в ваши размеры rem/em.
Ответ 27
Вот хак, который я использовал в одном из моих проектов:
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
Закончился первоначальными стилями и масштабами, которые я хотел, но не увеличил фокус.
Ответ 28
Даже с этими ответами мне потребовалось три дня, чтобы понять, что происходит, и мне может понадобиться решение снова в будущем.
Моя ситуация немного отличалась от описанной.
У меня был какой-то спорный текст в div на странице. Когда пользователь нажал на кнопку DIFFERENT div, своего рода кнопку, я автоматически выделил некоторый текст в contenteditable div (диапазон выбора, который был ранее сохранен и очищен), запустил execCommand расширенного текста в этом выделении и очистил его снова.
Это позволило мне незаметно изменять цвета текста в зависимости от взаимодействия пользователя с цветовыми элементами в другом месте страницы, сохраняя при этом выделение, как правило, скрытым, чтобы они могли видеть цвета в правильном контексте.
Что ж, на iPad Safari нажатие на div цвета привело к появлению экранной клавиатуры, и я ничего не сделал, чтобы помешать этому.
Я наконец выяснил, как iPad делает это.
Он прослушивает последовательность прикосновений и касаний, которые запускают выделение редактируемого текста.
Когда эта комбинация происходит, она показывает экранную клавиатуру.
На самом деле, он выполняет масштабирование тележки, где он расширяет нижележащую страницу, в то же время увеличивая редактируемый текст. Мне потребовался день, чтобы понять, что я вижу.
Таким образом, решение, которое я использовал, состояло в том, чтобы перехватить как touchstart, так и touchend для этих конкретных цветовых элементов. В обоих обработчиках я прекращаю распространение и всплывающие сообщения и возвращаю false. Но в событии touchend я запускаю то же поведение, что и нажатие.
Итак, раньше Safari запускал то, что я считаю "touchstart", "mousedown", "touchend", "mouseup", "click", и из-за моего кода, выделение текста, в таком порядке.
Новая последовательность из-за перехватов - это просто выделение текста. Все остальное перехватывается до того, как Safari сможет обработать его и выполнить работу с клавиатурой. Перехваты touchstart и touchend также предотвращают запуск событий мыши, и в контексте это вполне нормально.
Я не знаю более простого способа описать это, но я думаю, что важно иметь его здесь, потому что я нашел эту тему в течение часа после первого столкновения с проблемой.
Я на 98% уверен, что то же самое исправление будет работать с полями ввода и всем остальным. Перехватывайте события касания и обрабатывайте их отдельно, не позволяя им распространяться или пузыриться, и подумайте о том, чтобы сделать какие-либо выборки после небольшого тайм-аута, просто чтобы убедиться, что Safari не распознает последовательность как триггер клавиатуры.
Ответ 29
Вместо того, чтобы просто установить размер шрифта в 16px, вы можете:
- Стиль поля ввода так, чтобы он был больше, чем предполагалось, позволяя установить логический размер шрифта 16 пикселей.
- Используйте CSS-преобразование
scale()и отрицательные поля, чтобы уменьшить поле ввода до нужного размера.
Например, предположим, что ваше поле ввода изначально имеет стиль:
input[type="text"] {
border-radius: 5px;
font-size: 12px;
line-height: 20px;
padding: 5px;
width: 100%;
}
Если вы увеличите поле, увеличив все размеры на 16/12 = 133,33%, а затем уменьшите с помощью scale() на 12/16 = 75%, поле ввода будет иметь правильный визуальный размер (и размер шрифта), и будет нет увеличения фокуса.
Поскольку scale() влияет только на визуальный размер, вам также необходимо добавить отрицательные поля, чтобы уменьшить логический размер поля.
С этим CSS:
input[type="text"] {
/* enlarge by 16/12 = 133.33% */
border-radius: 6.666666667px;
font-size: 16px;
line-height: 26.666666667px;
padding: 6.666666667px;
width: 133.333333333%;
/* scale down by 12/16 = 75% */
transform: scale(0.75);
transform-origin: left top;
/* remove extra white space */
margin-bottom: -10px;
margin-right: -33.333333333%;
}
поле ввода будет иметь логический размер шрифта 16 пикселей, в то время как будет отображаться текст размером 12 пикселей.
У меня есть запись в блоге, где я углубляюсь в некоторые детали, и у меня есть этот пример для просмотра HTML:
Нет увеличения изображения в Safari на iPhone, пиксель идеальный способ
Ответ 30
В Angular вы можете использовать директивы для предотвращения увеличения фокуса на устройствах IOS. Нет метатега для сохранения доступности.
import { Directive, ElementRef, HostListener } from '@angular/core';
const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;
@Directive({ selector: '[noZoomiOS]' })
export class NoZoomiOSDirective {
constructor(private el: ElementRef) {}
@HostListener('focus')
onFocus() {
this.setFontSize('');
}
@HostListener('mousedown')
onMouseDown() {
this.setFontSize('${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px');
}
private setFontSize(size: string) {
const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);
if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
return;
}
const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS
&& (this.el.nativeElement.style.fontSize = size);
}
}
Вы можете использовать его как <input noZoomiOS > после того, как объявите его в своем *.module.ts