Zwischen Mobilgeräten und Desktop unterscheiden - ismobile() - JavaSkript

[Schiller72]

Hallo,

ich suche nach einer Möglichkeit via JavaSkript Desktopgeräte von mobilen Geräten zu unterscheiden. Zu den mobilen Geräten zähle ich neben Smartphones auch Tablets. Entsprechend gestaltete Webseiten sollen auf Mobilgerät und Desktop unterschiedlich angezeigt werden. Daher benötige ich eine Unterscheidungsfunktion.

Es gibt im Netz einige Code-Vorschläge, u.a. diesen hier:
http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery

So richtig funktioniert diese Lösung hier aber nicht.

Ich frage mich auch, ob man eine Abfrage nicht auch einfacher gestalten kann, in dem man anstelle der ganzen Gerätetypen auf das OS testet, dort gäbe es doch deutlich weniger zu testen ?!

Hat jemand hier eventuell einen Tipp, wie ich mein Problem am effektivsten und sichersten löse ?

Vielen Dank für Antworten!

 

[Sweettime]

http://detectmobilebrowsers.com/

 

[thecain]

wie wärs mit Mediaqueries?
https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

 

[Schiller72]

Erst mal Danke für die Links.

Was ich bisher probierte (Ähnlich wie von Sweettime vorgeschlagen) ist Folgendes:

<script>
function isMobile(){
var isMobile = false;
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;
}

if(isMobile()){
document.write('<FONT SIZE=1>- Darstellung für Mobilgeräte optimiert. -</FONT>');
}else {
document.write('<FONT SIZE=1>- Darstellung für Desktopgeräte optimiert. -</FONT>');
}
</script>


Dies klappt irgendwie nicht, es wird immer die Desktopvariante angesprungen.
Inwieweit ich Mediaqueries einsetzen kann weiß ich leider nicht.

 

[Tumbleweed]

https://de.wikipedia.org/wiki/Responsive_Webdesign

Es gibt ja oft verschiedene Möglichkeiten bei der Entwicklung, aber hier wage ich zu sagen: So und nicht anders.

Da gibt es übrigens zahlreiche Frameworks. Das muss man nicht unbedingt selber lösen. Wenn man Zeit hat, kann man das natürlich auch gerne tun.

 

[r15ch13]

function isMobile()
{
    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|ki ndle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|wi ndows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg( 13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4)));
}

Versuchs mal so. Die Funktion war fehlerhaft.

Edit: Stimme Tumbleweed zu. Responsive Webdesign ist die bessere Loesung.

 

[Zhen]

meines Wissens nach, wird bisher nur nach der Auflösung (Media Queries) und/oder nach dem UserAgent unterschieden. Ich selber mach responsive Design anhand von Media Queries, aber habe auch mal eine mobile Page erstellt wo ich allein anhand des UserAgents gegangen bin. ;-)

 

[Schiller72]

@r15ch13: Vielen Dank, der Code funktioniert (habe die Wirkung auf 2 Smartphones getestet, ein Tablet-Test steht morgen an ).
Eine Frage noch, wenn es kurz zu erklären ist, worin lag der Fehler in der ursprünglichen Methode ?

Zum Thema Responsive Webdesign ... Die Anpassungen brauche ich für eine Layout-Optimierung einer ebay-Shop-Seite, bei der auch Übergreifende Software (Afterbuy) eine Rolle spielt. Mein Freiheitsgrad beim Webseiten-Layout ist daher stark eingeschränkt, leider.

 

[John Reese]

Der Fehler lag darin, dass du in der Funktion nichts zurückgegeben hast (mit return).

Die Variable isMobile hatte also keinen Effekt.

 

[Schiller72]

Stimmt, da sah ich wohl "den Wald vor Bäumen" nicht oder so ähnlich und habe die wichtigste Eigenschafte der Funktion bzw. Methode nicht im Code berücksichtigt ... Asche auf mein Haupt.

Ergänzung (15. Februar 2016)

Die Unterscheidung Mobile<->Desktop funktioniert jetzt prima.

Jetzt stellt sich mir aber eine weitere Frage. Gibt es ein Möglichkeit die Seitenbreite von Webseiten zu skalieren und dieses zu erzwingen ? Ich weiß, man hätte das von Anfang an sauber mit CSS etc. layouten sollen und dann je nach Geräte die Darstellung anpassen.

Hauptanliegen aktuell ist es, dass die Webseiten den Test auf mobile-Friendly (http://mobile-friendly.i-ways.net) bestehen. Ergebnismeldung hier ist:

"Die Inhaltsbreite ist größer als die Viewport-Breite
Viewport-Breite: 320px, Inhaltsbreite: 384px
Durch die Verwendung von Media Queries wird sichergestellt, dass der Inhalt unabhängig von der Viewportbreite richtig dargestellt wird. Ebenfalls empfiehlt es sich, keine großen und fixierten CSS-Breiten für Seitenelemente wie z. B. div { width: 500px; } zu verwenden, da sie auf kleineren mobilen Geräten zu breit für den Meta Viewport sein könnten. Stattdessen sollten Sie relative Werte wie z. B. div { width: 100%; } verwenden."

Kann man hier evt. mit den besagten Media Queries und/oder dem Viewport-Tag Abhilfe schaffen ? Es muss nicht "schön" aussehen, es genügt, wenn das Kriterium erfüllt ist.