Handy erkennung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfang
angabe
browser
code
datei
design
erkennen
farbe
frage
handheld
hintergrund
http
internet
match
mobilen design
reagieren
sagen
url
windows
wissen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Lassen wir den Beitrag von
Hmilch, äh hpage, wie gewohnt, einfach mal aussen vor.
Zu seinen Beiträgen fällt mir eh nur; dank an Sonok; folgendes ein: *listen*
app-center schrieb:
Wie kann ich es hinkriegen dass meine Internetseite ein Handy erkennt und dann automatisch zur mobilen Seite wechselt.
Warum ein Handy erkennen? Das einzige, was den Seitenbetreiber interessiert, ist die Auflösung, die der Client des Users darstellen kann. Dabei iet es egal, ob er per Handy auf die Seite kommt, oder mit einem 24" Monitor, aber nur ein kleines Fenster für die Webseite bereit stellt.
Ergo ist die Kennung des Devices, zumindest was die Auflösung der Seite betrifft, egal. Der einzige Weg, sinnvoll auf die Vielfalt der Anforderungen eventueller Nutzer zu reagieren, ist das sog. "!responsive Design", welches sich an die Gegebenheiten des userseitgen Browserfensters anpaßt. Verfügbarkeit von Flash- und/oder Javascriptinterpretern sind auch geräteunabhängig und sollten separat abgefragt und behandelt werden.
Es ist nicht sinnvoll, zwischen einer desktoptauglichen und DER mobilen Website zu unterscheiden. Weder Desktops noch mobile Systeme sind so einheitlich in ihrer Art, daß man, mit vertretbarem Aufwand, für alle mit einer speziellen Lösung reagieren könnte.
Da hilft nur Selbstbeschränkung und eine, möglichst weitreichende Flexibilität.
Responsive Design liefert genau das gewünschte Ergebnis. Wenn man sich daran orientiert, ist es wurscht, mit welcher Auflösung der User die Seite betrachtet. Das Layout paßt sich den Gegebenheiten an und ist, darüber hinaus, auch weitestgehend barrierefrei, was ein zusätzlicher Pluspunkt ist. .
Systemabhängige Browsererweiterungen, wie Flash und Silverlight, sollte man prinzipiell vermeiden und Javascript nur einsetzen, wenn Fallbacks vorhanden sind, also eine Nutzung der Seite, wenn auch mit weniger Komfort, auch ohne JS möglich ist.
Jetzt kommt vermutlich sehr schnell das Argument, daß mit HTML5 alles besser wird. Ok, das stimmt, wenn der User einen Browser nutzt, der HTML 5 vollständig, oder zumindest vernünftig unterstützt. Aber auch nur dann! Und was ist, wenn nicht?
Letztendlich macht der Webdesigner seine Seiten für User und hat nicht darüber zu bestimmen, welchen Browser, welche Auflösung, welche Plugins oder welches Gerät dieser nutzt. Arroganz (wie z.B. "Die doofen User des IE sind mir egal" ) muß man sich leisten können. Diejenigen, die diese Arroganz zeigen, können es meist nicht.
Eine gute Basis zu Ideen und praktischen Anwendungen von "responsive Design" liefern http://bradfrost.github.io/this-is-responsive/patterns.html und ein alter aber grundlegender Artikel bei "a List Apart" (mein Favorit für Einsteiger!)
Beitrag zuletzt geändert: 25.6.2013 23:58:59 von fatfreddy -
Hallo app-center,
zu deiner Frage, eine Möglichkeit hierfür wäre http://mobiledetect.net/. Benutze ich selber auch in einem Projekt und hat bisher immer zuverlässig funktioniert. Du musst dir jedoch im klaren sein, dass diese Methode nicht zu 100% zuverlässig ist, da die Klasse nur den gesendeten Header ausließt, welcher relativ einfach geändert werden kann.
Eine zweite Möglichkeit wäre, Clientseitig mit Javascript zu prüfen, ich würde dir jedoch die Serverseitige Methode empfehlen.
app-center schrieb:
Es ist nicht sinnvoll, zwischen einer desktoptauglichen und DER mobilen Website zu unterscheiden.
Grundsätzlich stimme ich deiner Meinung zu responsive Webdesign zu.
Dennoch wissen wir nichts genaueres über sein Projekt, deshalb finde ich es etwas kontraproduktiv hier einen doch sehr langen Vortrag darüber zu halten, wie er es anders machen könnte.
Es könnte ja sein, dass seine eigentliche Webseite eine Flash-Seite ist (auch wenn Flash-Seiten nicht optimal sind, gibt es sie dennoch) und er mobile Geräte auf eben eine HTML-basierte Seite umleiten will. ( wie zB. hier: http://www.flyingbulls.at/ )
oder dass seine Seite so komplex ist, dass sie unmöglich durch responsive Webdesign Smartphone-tauglich gemacht werden kann, wie zB Facebook (auch nicht das beste Beispiel, ich weiß)
oder er hat einen ganz anderen Grund, jedenfalls können wir durch die Infos, die er uns bislang gegeben hat, nicht wissen warum genau er mobile Geräte umleiten möchte.
Edit:
Gerade habe ich auf seinen Webspace hier auf lima-city geschaut und gesehen, dass er unter mobil einen eigenen "app-store" einrichtet.
Dehalb macht es hier sehr wohl einen Sinn, Mobile Geräte zu erkennen!
Beitrag zuletzt geändert: 8.7.2013 13:45:29 von freezinger -
Es gibt ein Script welches Google selbst zum Download anbietet. Ich benutze aber einen kürzeren Script:
<?php function isMobile() { return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]); } if(isMobile()) { header("Location:mobil.html"); //Leitet auf mobil.HTML um } else { //Script für die Desktop-Seite } ?> -
Das Erkennen von Mobilgeräten funktioniert grundsaetzlich ueber den User-Agent, welcher von den Usern mitunter auch gesteuert werden kann, was ein Vorteil ist.
-
var userAgent = navigator.userAgent.toLowerCase(); if(userAgent.match('iphone')) alert('Hello iPhone!'); else if(userAgent.match('ipad')) alert('Hello iPad!'); else if(userAgent.match('android')) alert('Hello Android!'); else if(userAgent.match('windows phone')) alert('Hello Windows Phone!'); else alert('Hello '+userAgent);
oder
<script> function isMobile(){ return navigator.userAgent.match(/(iPhone|iPod|iPad|blackberry|android|Kindle|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i); } if(isMobile()){ alert("Es handelt sich um ein mobiles Gerät"); }else { alert("Es handelt sich um kein mobiles Gerät"); } </script> -
Du kannst ein extra CSS design dafür einfügen: <link rel="stylesheet" href="deindesign.css" media="handheld">
-
austriafx schrieb:
Du kannst ein extra CSS design dafür einfügen: <link rel="stylesheet" href="deindesign.css" media="handheld">
Blöd nur, dass das von keinem Smartphone oder Tablet geladen wird.
Wenn schon müsste er mit Mediaqueries arbeiten. -
Bei mir wechselt es immer zu dem mobilen Design
-
austriafx schrieb:
Bei mir wechselt es immer zu dem mobilen Design
Da ich nicht weiß welches Gerät du benutzt, kann ich dazu nichts sagen aber meines Wissens nach laden nahezu alle modernen Smartphones und Tablets die normalen Screen-CSS Dateien und ignorieren die Handheld-Dateien.
Irgendwo hatte ich darüber sogar mal einen Artikel gelesen. Mal sehen ob sich der noch wo findem lässt. -
freezinger schrieb:
austriafx schrieb:
Bei mir wechselt es immer zu dem mobilen Design
Da ich nicht weiß welches Gerät du benutzt, kann ich dazu nichts sagen
Ich habe ein iphone 4, und als ich media="handheld" ausprobiert hatte wechselte es zum neuen Design, bei mir war es am Anfang nur eine andere Hintergrund-Farbe -
austriafx schrieb:
Ich habe ein iphone 4, und als ich media="handheld" ausprobiert hatte wechselte es zum neuen Design, bei mir war es am Anfang nur eine andere Hintergrund-Farbe
Bei mir ergab der Selbsttest mit http://freezinger.lima-city.de/HandheldCSS/
unter Android 4.1.2. auf dem Galaxy SII folgendes:
Standard Android Browser: lädt Screen CSS
Firefox: lädt Screen CSS
Opera Beta: lädt Screen CSS
Chrome: lädt Screen CSS
Auch im Internet Explorer auf Windows Phone (Nokia Lumia 720) wird die Screen.css geladen.
media="handheld" dürfte sich von daher auf das iPhone und möglicherweiße einige, wenige andere beschränken. -
freezinger schrieb:
austriafx schrieb:
Ich habe ein iphone 4, und als ich media="handheld" ausprobiert hatte wechselte es zum neuen Design, bei mir war es am Anfang nur eine andere Hintergrund-Farbe
Bei mir ergab der Selbsttest mit http://freezinger.lima-city.de/HandheldCSS/
unter Android 4.1.2. auf dem Galaxy SII folgendes:
Standard Android Browser: lädt Screen CSS
Firefox: lädt Screen CSS
Opera Beta: lädt Screen CSS
Chrome: lädt Screen CSS
Auch im Internet Explorer auf Windows Phone (Nokia Lumia 720) wird die Screen.css geladen.
media="handheld" dürfte sich von daher auf das iPhone und möglicherweiße einige, wenige andere beschränken.
Ok, dann tut es mir Leid das ich euch das vorgeschlagen hatte, ich hätte auch noch eine Lösung mit PHP, in der man auf jeder Seite noch einen kleinen Code einfügen muss:
Ich Suche den mal raus, dann könnte man eigentlich wenn es ein Handy ist auf die mobile version umleiten -
media="handheld" dürfte sich von daher auf das iPhone und möglicherweiße einige, wenige andere beschränken.
Ich persönlich halte handheld für überholt, denn lt.
http://www.w3.org/TR/CSS2/media.html#media-types
handheld
Intended for handheld devices (typically small screen, limited bandwidth).
Aktuelle Geräte schießen doch ein Selbsttor, wenn sie sich freiwillig dort einordnen.
Ich halte mich in der Regel an die Hinweise von Google
https://developers.google.com/webmasters/smartphone-sites/details
also responsiv.
Dabei hilft sowas wie Amazium, entweder im direkten Einsatz oder in dem man den dort verfolgten Ansatz sinngemäß anwendet. -
Hallo!
Die sinnvollste Variante Seiten einfach und flüssig anzupassen ist mit responsive Design, sprich media-querries und %-Angaben. Bei den Mediaquerries reicht es, sich für Handys im Portraitmodus auf 320px zu beschränken und im Landscapemodus auf 480px, bei Tables im Portrait 768 und im Landscape 1024. Dann solltest Du über die Meta-Angaben auch angeben das die Seite optimiert ist.
Die %-Angaben kannst Du dir sehr simpel errechnen. Wenn Du eine Ausgangsgröße von 1140px hast und eine Box mit 600px darstellen möchtest ist die Formel 'B/A*100' B steht für die Box, A für die Ausgangsgröße.
Ansonsten gibt es auch sog. responsive Frameworks, dort findest du auf Github einen guten vergleich:
http://usablica.github.io/front-end-frameworks/compare.html
Lg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
