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

Rednose · 10. November 2016

Hallo liebes HTML-Forum,

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
<buttonid ="btn1"onmousedown="messageToServer('btn1_onmousedown');"onmouseup="messageToServer('btn1_onmouseup');">rauf</button>
<buttonid ="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

MrMurphy · 10. November 2016

Hallo

Zitat

Warum ist das so...

Das liegt am fehlenden hover-Effekt von Touchscreen-Geräten.

Bei Menüs werden Untermenüs häufig durch den hover-Effekt aufgeklappt. Der Menüpunkt, der den hover-Effekt steuert, ist meist aber auch bereits mit einem Link hinterlegt.

Wird der angeklickt, wird die damit verbundene Seite aufgerufen.

Bei Touchscreen-Geräten könnte so nie das Untermenü aufgerufen werden. Deshalb wird bei denen mit dem ersten Klick meist das Untermenü geöffnet und erst mit einem zweiten Klick wird dem Link gefolgt.

Das ist meiner Kenntnis nach (ich lasse mich da aber gerne verbessern) in den HTML-Regeln aber nicht vorgeschrieben, sondern jeder Browserhersteller entscheidet für sich was passiert, wenn auf Touchscreen-Geräten ein Link angeklickt wird, zu dem gleichzeitig ein hover-Effekt hinterlegt ist.

Deshalb kann ich dir bei der Frage

Zitat

wie kann man das Taster-Verhalten auch am Android-Tablet erreichen?

leider nicht weiterhelfen.

Zitat

Nur im iPhone-Browser werden die Buttons nur sehr klein angezeigt

Dazu müssten wir deinen Quellcode kennen. Aus dem Bauch raus würde ich auf eine ungünstige Viewport-Angabe tippen. Heutzutage ist folgende im head-Bereich üblich

Code

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

Falls du keine oder eine andere hast kannst du die ja mal ausprobieren.

Gruss

MrMurphy

Rednose · 10. November 2016

Hallo MrMurphy,

zunächst danke für deinen Input! Habe den <meta>-Tag hinzugefügt...hat aber leider nichts verändert

Hier ist der originale Code...

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Erste Versuche f&uuml;r die Haussteuerung</title> 
<meta charset="utf-8" /> 







<style> 
button { color: green; padding:20px 50px 20px 50px}h3 { color: red} 







</style> 







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script >var ws = new WebSocket("ws://10.0.0.11:8888/smarthome"); 
ws.onopen = function(evt) {$("#log").text("Client: Websocket wurde geöffnet..."); 




}ws.onmessage = function(evt) { 
$("#log").text(evt.data);console.log('Server: ' + evt.data); 
}ws.onclose = function(evt) {$("#log").text("Client: Websocket wurde geschlossen..."); 
} 
function messageToServer(message) { 
ws.send(message); 
} 




</script> 




<!-- weitere Kopfinformationen --> 
<!-- Kommentare werden im Browser nicht angezeigt. --> 
</head> 




<body> 




<h3>Smart Home</h3> 
<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> 
<p>Raffstore 2 
<button id ="btn3" onmousedown="messageToServer('btn3_onmousedown');" onmouseup="messageToServer('btn3_onmouseup');">rauf</button> 
<button id ="btn4" onmousedown="messageToServer('btn4_onmousedown');" onmouseup="messageToServer('btn4_onmouseup');">runter</button> 
</p> 
<p>Raffstore 3 
<button id ="btn5" onmousedown="messageToServer('btn5_onmousedown');" onmouseup="messageToServer('btn5_onmouseup');">rauf</button> 
<button id ="btn6" onmousedown="messageToServer('btn6_onmousedown');" onmouseup="messageToServer('btn6_onmouseup');">runter</button> 
</p> 
<p>alle Raffstore 
<button id ="btn7" onmousedown="messageToServer('btn7_onmousedown');" onmouseup="messageToServer('btn7_onmouseup');">rauf</button> 
<button id ="btn8" onmousedown="messageToServer('btn8_onmousedown');" onmouseup="messageToServer('btn8_onmouseup');">runter</button> 
</p> 
<p>Steckdose 
<button id ="btn9" onmousedown="messageToServer('btn9_onmousedown');" onmouseup="messageToServer('btn9_onmouseup');">Toggle</button> 
</p> 




<p><b>Message:</b></p><div id="log" style="overflow: auto; position: absolute ; overflow-x: hidden; 
width:350px; height:50px; background-color: #c2c7af">...</div></body> 
</html>

Alles anzeigen

lg, Rednose

MrMurphy · 10. November 2016

Hallo

Ich habe das grade mal ausprobiert. Mit dem von mir genannten Eintrag werden die Buttons nicht so extrem verkleinert dargestellt.

Hast du beim Testen auch den Cache gelöscht?

Das dein CSS noch ausbaufähig ist wird dir wahrscheinlich selbst klar sein.

Gruss

MrMurphy

Sempervivum · 11. November 2016

Wenn man erwartet, dass registrierte Maus-Eventhandler auf einem Touch-Gerät genau so funktionieren, wie bei Mausbedienung, so kann das bis zu einem gewissen Grade funktionieren, es kann aber auch schief gehen und nicht das erwartete Verhalten bringen, so wie in deinem Fall.
Ich empfehle, abhängig vom Typ des Gerätes entweder die Maus- oder die Touch-Handler zu registrieren. Dieses habe ich auf meinem Android-Handy getestet und es funktioniert dort:

Code

<div id="msgbox"></div>        <button style="padding: 50px;" id ="btn1">rauf</button>        <script>            var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));            if (isTouch) {                document.getElementById("btn1").addEventListener("touchstart", function () {                    document.getElementById("msgbox").innerHTML += "tstart";                });                document.getElementById("btn1").addEventListener("touchend", function () {                    document.getElementById("msgbox").innerHTML += "tend";                });            } else {                document.getElementById("btn1").addEventListener("mousedown", function () {                    document.getElementById("msgbox").innerHTML += "mdown";                });                document.getElementById("btn1").addEventListener("mouseup", function () {                    document.getElementById("msgbox").innerHTML += "mup";                });             }

Rednose · 11. November 2016

Hallo zusammen,

vielen Dank für eure Beiträge!

@ Sempervivum: werde hoffentlich am Wochenende dazu kommen dein Listing auszuprobieren, schaut sehr interessant aus.

Zitat

Das dein CSS noch ausbaufähig ist wird dir wahrscheinlich selbst klar sein.

Grundsätzlich ist der aktuelle Code nur mal zum Testen...aber ich bin ganz Ohr für Tipps, um mein CSS noch weiter auszubauen

lg, Rednose

Rednose · 11. November 2016

Hallo Sempervivum,

danke für deinen Beitrag...es funkt nun nach meinen Vorstellungen
Hier ist ein kurzer Codeausschnitt:

HTML

<script >
function messageToServer(message) {
ws.send(message);
}




var isMobile = {
   Android: function () {
       return navigator.userAgent.match(/Android/i);
   },
   BlackBerry: function () {
       return navigator.userAgent.match(/BlackBerry/i);
   },
   iOS: function () {
       return navigator.userAgent.match(/iPhone|iPod|iPad/i);
   },
   Opera: function () {
       return navigator.userAgent.match(/Opera Mini/i);
   },
   Windows: function () {
       return navigator.userAgent.match(/IEMobile/i);
   },
   any: function () {
       return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
   }
}; 
</script>




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




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

   if (isMobile.any()) {
    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>

Alles anzeigen

Interessant wäre jetzt noch, ob man das noch eleganter lösen kann?!?!

lg Rednose

Hudegen · 9. Oktober 2019

Hi,

sag mal, hat es nun alles funktioniert?

Und aus reiner neugier, wie hast du das am Rasberry letztendlich gelöst?

Grüße

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

Jetzt mitmachen!

Teilen