Unterschiedliches Verhalten von <button> Tag in Desktop-, Android- und iPhone-Browser

  • Hallo liebes Forum,

    ich bin jetzt nicht ganz sicher, ob ich hier überhaupt im richtigen Forum bin, aber ich denke, dass es sicher einige Kollegen gibt, die das gleiche oder ein ähnliches Problem hatten:

    Für mein Raspberry Pi Projekt habe ich eine kleine Webseite eingerichtet mit der ich über das <button>-Tag Leds ansteuern kann.
    Hier ist zunächst ein kleiner Code-Ausschnitt:

    <p>Raffstore 1
    <button id ="btn1"onmousedown="messageToServer('btn1_onmousedown');"onmouseup="messageToServer('btn1_onmouseup');">rauf</button>
    <button id ="btn2"onmousedown="messageToServer('btn2_onmousedown');"onmouseup="messageToServer('btn2_onmouseup');">runter</button>
    </p> 

    Was soll dieser Code nun bewirken? Drückt man einen Button, soll die Led angehen, löst man den Button wieder, soll die Led ausgehen. Also eine Taster-Funktionalität. Das Ganze funktioniert auch einwandfrei im Browser (Chrome) am Desktop-Rechner.
    Rufe ich nun diese Website über einen Browser (ebenfalls Chrome) am Android-Tablet auf, ist das Verhalten des Buttons anders. Hier bleibt der Button nach dem Betätigen aktiviert, ein neuerliches Betätigen deaktiviert den Button wieder. D.h. in diesem Fall hat der Button ein Toggle-Verhalten.
    Warum ist das so...wie kann man das Taster-Verhalten auch am Android-Tablet erreichen?


    Ein weiteres komisches Verhalten habe ich im iPhone-Browser beobachtet...da man die Buttons mit den Fingern am Smartphone / Tablet betätigen möchte, habe ich für das Padding verhältnismäßig großer Werte vergeben. Am Desktop- und Android-Tablet-Browser stimmt die Anzeige auch dementsprechend. Nur im iPhone-Browser werden die Buttons nur sehr klein angezeigt´. Nämlich dem Text des Buttons entsprechend. Warum ist das so und wie kann man die Buttons auch am iPhone größer darstellen?


    Ich bin eher ein Rookie was HTML Programmierung anbelangt, vor allem in Verbindung mit Smartphones und Tablets. Aber vielleicht hat ja irgendjemand von euch Antworten für mich?!?!
    Danke im Voraus


    lg
    Rednose

  • Unterschiedliches Verhalten von <button> Tag in Desktop-, Android- und iPhone-Browser? Schau mal ob du hier fündig wirst!

  • Meine erste Vermutung dazu wäre dass ein Browser auf einem Smartphone einen anderen Modus aktiv hat, nämlich den "mobile"-Mode. Der wird soweit ich weiß durch den User-Agent des Clients erkannt und dann halt aktiviert.

    Zumindest andersherum, also auf dem Desktop den Mobile-Modus aktiveren hab ich hier beschrieben: Chromiumbrowser - Mobile Website

    Für iSO bzw Safari hab ich durch eine kurze Suche das gefunden: http://www.howtogeek.com/176932/how-to-…-on-your-phone/

    Vielleicht gibt es eine Möglichkeit das über HTML oder jQuery von seiten der Webseite zu beeinflussen, das weiß ich aber grad nicht...

  • Hallo meigrafd,

    zunächst danke für die Inputs...

    Zitat


    Für iSO bzw Safari hab ich durch eine kurze Suche das gefunden: http://www.howtogeek.com/176932/how-to-d...our-phone/


    Hat leider nichts verändert

    Zitat


    Zumindest andersherum, also auf dem Desktop den Mobile-Modus aktiveren hab ich hier beschrieben: https://forum-raspberrypi.de/forum/thread/2…29371#pid229371


    Das hätte zwar sogar funktioniert, aber ich brauche es eben genau anderherum ;)

    lg, Rednose

  • Hallo Tell,

    danke für die Tipps...du hast mich auf die richtige Fährte gebracht :thumbs1:

    Hier ist der Code, wie es meinen Vorstellungen entsprechend funktioniert:


    Interessant wäre jetzt aber noch, ob man das ganze etwas eleganter lösen könnte?!?!?

    lg, Rednose

  • Das einzige was mir zum "eleganter" einfällt wären 2 Dinge:
    1) Einheitliche Einrückungen - liest sich besser und sieht auch besser aus
    2) ein Array-Objekt für das Suchmuster

    [code=php]
    <script>
    function messageToServer(message) {
    ws.send(message);
    }

    function isMobile() {
    var uaMatch = {
    Android: "Android",
    BlackBerry: "BlackBerry",
    iOS: "iPhone|iPod|iPad",
    KindleFire: "Silk",
    Opera: "Opera Mini",
    Windows: "IEMobile",
    // TEST: "Mozilla",
    }
    for (key in uaMatch) {
    var val = navigator.userAgent.match(new RegExp(uaMatch[key]), "i");
    if (val) { return true; }
    }
    return false;
    }
    </script>

    <body>
    <p>
    Raffstore 1
    <button id="btn1">rauf</button>
    </p>

    <script>
    var touchzone_btn1 = document.getElementById("btn1");

    if (isMobile()) {
    touchzone_btn1.addEventListener("touchstart", function() {messageToServer('btn1_onmousedown');}, false);
    touchzone_btn1.addEventListener("touchend", function() {messageToServer('btn1_onmouseup');}, false);
    } else {
    touchzone_btn1.addEventListener("mousedown", function() {messageToServer('btn1_onmousedown');}, false);
    touchzone_btn1.addEventListener("mouseup", function() {messageToServer('btn1_onmouseup');}, false);
    }
    </script>
    </body>
    [/php]

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!