Заборонити iPhone збільшувати `select` у веб-програмі

У мене такий код:

<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;
}

src: зняти масштаб після вибору в iphone

user-scalable = ні - це те, що вам потрібно, саме тому насправді є остаточна відповідь на це питання

<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;
    }
}

Схожі тут по Кристина 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 пікселів.

лише при натисканні будь-якого поля відбувається масштабування сторінки. тож за кліком ми робимо його як 16px, а потім змінюємо на значення за замовчуванням

нижче фрагмент добре працює для мене і націлений на мобільні пристрої,

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

Встановіть для розміру шрифту "select" значення 16px

виберіть {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;

Це також буде працювати з іншими елементами, які отримують особливий стиль, наприклад, введення [type = search].

Я читав це протягом декількох годин, і найкращим рішенням є цей jquery тут. Це також допомагає з опцією "наступна вкладка" в iOS Safari. У мене тут також є вхідні дані, але сміливо видаляйте їх або додайте, як завгодно. В основному, миша спрацьовує перед фокус-подією і обманює браузер, щоб подумати про його 16 пікселів. Крім того, фокусування спрацьовує на функції "наступна вкладка" і повторить процес.

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