Wie kann ich den Zoom auf einer mobilen Webseite "deaktivieren"?

Question

Ich erstelle eine mobile Webseite, die im Grunde ein großes Formular mit mehreren Texteingaben ist.

Allerdings wird (zumindest auf meinem Android-Handy) jedes Mal, wenn ich auf eine Eingabe klicke, die gesamte Seite vergrößert, wodurch der Rest der Seite verdeckt wird. Gibt es einen HTML- oder CSS-Befehl, um diese Art von Zoom auf mobilen Webseiten zu deaktivieren?

Answer 1

Die Lösung mit einer meta -Tag hat bei mir nicht funktioniert (getestet mit Chrome win10 und safari IOS 14.3), und ich glaube auch, dass die von Jack und anderen erwähnten Bedenken hinsichtlich der Barrierefreiheit beachtet werden sollten.

Meine Lösung besteht darin, das Zoomen nur bei Elementen zu deaktivieren, die durch den Standardzoom beschädigt werden.

Ich habe dies getan, indem ich Ereignis-Listener für Zoom-Gesten registriert habe und mit event.preventDefault() um das Standard-Zoom-Verhalten des Browsers zu unterdrücken.

Dies muss mit mehreren Ereignissen geschehen (Berührungsgesten, Mausrad und Tasten). Das folgende Snippet ist ein Beispiel für das Mausrad und Pinch-Gesten auf Touchpads:

noteSheetCanvas.addEventListener("wheel", e => {
        // suppress browsers default zoom-behavior:
        e.preventDefault();

        // execution of my own custom zooming-behavior:
        if (e.deltaY > 0) {
            this._zoom(1);
        } else {
            this._zoom(-1);
        }
    });

Hier wird beschrieben, wie man Berührungsgesten erkennt: https://stackoverflow.com/a/11183333/1134856

Ich habe dies verwendet, um das Standard-Zooming-Verhalten für die meisten Teile meiner Anwendung beizubehalten und um ein benutzerdefiniertes Zooming-Verhalten für ein Canvas-Element zu definieren.

Answer 2

Mit Hilfe dieses Beitrags und einiger anderer habe ich es geschafft, das Ganze so zu gestalten, dass es mit Android und iPhone/iPad/iPod kompatibel ist, indem ich den folgenden Code verwendet habe. Dies ist für PHP, können Sie das gleiche Konzept für jede andere Sprache mit String-Suche verwenden.

<?php //Device specific headers
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

if($iPhone || $iPod || $iPad){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}

?>

Answer 3

Vielleicht hilft das jemandem: Unter iOS wurde mein Problem durch den Austausch von <button> s für <div> s, zusammen mit den anderen genannten Dingen.

Answer 4

document.addEventListener('dblclick', (event) => {
    event.preventDefault()
}, { passive: false });