Wyłącz automatyczne skalowanie/skalowanie pola w tagach wejściowych w mojej witrynie mobilnej - BEZ wyłączania wszystkich opcji powiększania
Spędziłem cały dzień szukając rozwiązania, a ta strona ciągle się pojawia, więc dlaczego nie zapytać was.
Buduję mobilną stronę internetową dla naszej firmy i chcemy wyłączyć automatyczne skalowanie urządzeń mobilnych używanych do skalowania tekstu/wyszukiwania/wiadomości e-mail, gdy są one skoncentrowane.
Buduję stronę internetową w HTML5 i widziałem/testowałem
rozwiązanie
& < meta name = "viewport" content = "width = device-width, user-scalable = no"/& >. Z różnymi właściwościami (tj. Minimalna skala =
#, maximum-scale=
#" )
Działa to na prawie 31 urządzeniach mobilnych, na których testuję. Tylko jeden problem. Chcę, aby użytkownik mógł dowolnie powiększać/pomniejszać. (mamy kilka zdjęć produktów w wyższej rozdzielczości, które fajnie byłoby zobaczyć z bliska)
Jak mogę wyłączyć skalowanie po kliknięciu znaczników wejściowych, zachowując jednocześnie pełną ręczną kontrolę nad skalowaniem użytkownika?
p. Strona s korzysta również z jQuery. Więc wszelkie myśli wykorzystujące to mogą pomóc.
podziękować
Jrak
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
6 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
wyłącz automatyczne zwiększanie wartości wejściowej tagu „Tekst” - Safari na iPhonie
https://coderoad.ru/2989263/
Nie mogłem znaleźć czystego sposobu, ale oto Hack ...
1) Zauważyłem, że zdarzenie myszy nad zdarzeniem ma miejsce przed powiększeniem, ale powiększanie ma miejsce przed zdarzeniami przesunięcia kursora myszy lub ostrości.
2) Możesz dynamicznie zmienić tag META viewport za pomocą javascript (patrz.
włączyć/wyłączyć powiększanie w iPhone Safari za pomocą JavaScript?
https://coderoad.ru/2750028/
)
Więc spróbuj tego (pokazanego w jquery dla zwartości):
$("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"/>');
}
To zdecydowanie hack ... mogą zdarzyć się sytuacje, w których najechanie myszą/w dół nie zawsze łapie wejścia/wyjścia, ale zadziałało dobrze w moich testach i jest to dobry początek.
Anonimowy użytkownik
Potwierdzenie od:
http://nerd.vasilis.nl/prevent ... focus
http://nerd.vasilis.nl/prevent ... ocus/
/
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));
});
Anonimowy użytkownik
Potwierdzenie od:
input, textarea {font-size:16px;}Anonimowy użytkownik
Potwierdzenie od:
automatyczne powiększanie po wybraniu znacznika wejściowego jest wyłączone na iPhonie.
Nie testowałem innych przeglądarek mobilnych.