Zapobiegaj powiększaniu iPhone'a na `wybierz 'w aplikacji internetowej

Mam ten kod:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Działa w pełnoekranowej aplikacji internetowej na iPhonie.

Wybierając coś z tej listy, iPhone powiększa select-element. I nie zmniejsza się po wybraniu czegoś.

Jak mogę temu zapobiec? Albo pomniejszyć?

Dzieje się tak prawdopodobnie dlatego, że przeglądarka próbuje powiększyć obszar, ponieważ rozmiar czcionki jest mniejszy niż próg, zwykle dzieje się tak w przypadku iPhone'a.

Podanie atrybutu metatagu „user-scalable = no” ograniczy użytkownikowi możliwość powiększania w innym miejscu. Ponieważ problem dotyczy tylko elementu select , spróbuj użyć poniższego w swoim css, ten hack jest pierwotnie używany w 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 po wybraniu w iphone

user-scalable = no jest tym, czego potrzebujesz, tak więc istnieje ostateczna odpowiedź na to pytanie

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

Wydawało się, że działa to w moim przypadku w rozwiązaniu tego problemu:

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

Zaproponowane tutaj przez Christinę Arasmo Beymer

iPhone nieznacznie powiększy pola formularza, jeśli tekst jest ustawiony na mniej niż 16 pikseli . Sugerowałbym ustawienie tekstu pola formularza mobilnego na 16 pikseli, a następnie zastąpienie rozmiaru z powrotem w przypadku komputerów stacjonarnych.

Odpowiedzi mówiące o wyłączeniu zoomu nie są pomocne dla niedowidzących użytkowników, którzy mogą nadal chcieć powiększać na mniejszych telefonach komórkowych.

Przykład:

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

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

Trochę spóźniłem się na imprezę, ale znalazłem całkiem zgrabne obejście, które rozwiązuje ten problem tylko z manipulacją CSS. W moim przypadku nie mogłem zmienić rozmiaru czcionki ze względów projektowych, a także nie mogłem wyłączyć powiększania.

Ponieważ iPhone nieznacznie powiększy pola formularza, jeśli tekst jest ustawiony na mniej niż 16 pikseli, możemy oszukać iPhone'a, aby pomyślał, że rozmiar czcionki to 16px, a następnie przekształcić go do naszego rozmiaru.

Na przykład weźmy przykład, gdy nasz tekst ma 14 pikseli, więc powiększa się, ponieważ jest mniejszy niż 16 pikseli. Dlatego możemy przekształcić skalę zgodnie z 0,875.

W poniższym przykładzie dodałem wypełnienie, aby pokazać, jak odpowiednio przekonwertować inne właściwości.

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

Mam nadzieję, że to pomoże!

Spróbuj tego:

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 zostanie uruchomiony przed zmianą, więc powiększenie zostanie wyłączone w momencie uruchomienia zmiany. W funkcji onchange na koniec możesz przywrócić sytuację początkową.

Przetestowano na telefonie iPhone 5S

iOS powiększa stronę, aby wyświetlić większe pole wejściowe, jeśli rozmiar czcionki jest mniejszy niż 16 pikseli.

Tylko kliknięcie dowolnego pola powoduje powiększenie strony. więc po kliknięciu zmieniamy go na 16 pikseli, a następnie zmieniamy na wartość domyślną

poniższy fragment działa dobrze i jest przeznaczony dla urządzeń mobilnych,

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

Ustaw rozmiar wszystkich czcionek „wybierz” na 16 pikseli

select {font-size: 16px; }

Nie sądzę, że nie możesz nic zrobić z tym zachowaniem w izolacji.

Możesz w ogóle zapobiec powiększaniu strony. Jest to dobre, jeśli Twoja strona jest przeznaczona dla telefonu.

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

Inną rzeczą, którą możesz spróbować, jest użycie konstrukcji JavaScript zamiast ogólnej instrukcji „select”. Utwórz ukryty div, aby pokazać swoje menu, przetwarzaj kliknięcia w javascript.

Powodzenia!

Jak odpowiedział tutaj: Wyłącz automatyczne powiększanie w tagu „tekst” wprowadzania danych - Safari na iPhonie

Możesz uniemożliwić Safari automatyczne powiększanie pól tekstowych podczas wprowadzania danych przez użytkownika bez wyłączania możliwości powiększania przez szczypanie. Po prostu dodaj, maximum-scale=1ale pomiń atrybut skali użytkownika sugerowany w innych odpowiedziach.

Jest to opłacalna opcja, jeśli masz formularz w warstwie, która „pływa” po powiększeniu, co może spowodować, że ważne elementy interfejsu użytkownika znikną z ekranu.

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

Spróbuj dodać ten CSS, aby wyłączyć domyślny styl Ios:

-webkit-appearance: none;

Będzie to działać również w przypadku innych elementów, które mają specjalny styl, takich jak input [type = search].

Czytałem o tym przez kilka godzin i najlepszym rozwiązaniem jest ta jquery. Pomaga to również w opcji „następna karta” w Safari na iOS. Mam tutaj również dane wejściowe, ale możesz je usunąć lub dodać, jak chcesz. Zasadniczo mousedown uruchamia się przed zdarzeniem fokusu i wprawia przeglądarkę w myślenie o 16 pikselach. Ponadto fokus zostanie uruchomiony w funkcji „następna karta” i powtórzy proces.

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