Hat ein mobiles Gerät ein Gyroskop oder Beschleunigungssensor?
Im letzten Beitrag habe ich einen Weg gezeigt, mit dem man ermitteln kann, ob ein Gerät wirklich mobil ist. Der DeviceMotionEvent gab hierüber Auskunft. Will man wissen, ob ein Gerät über ein Gyroskop verfügt, kann man wie folgt vorgehen: See the Pen Accelerometer or Gyroscope by uli schaeffler (@ulrischa) on CodePen. Erklärung Ich dachte bis […]
Überprüfen ob ein Gerät wirklich “mobil” ist
Ob ein Gerät mobil ist, kann man auf einer Webseite über mehrere Arten überprüfen. Ob das Gerät wirklich portable bzw. mobil ist – sprich bewegt werden kann – ist aber oft noch nicht damit geklärt. Oft werden folgende Verfahren verwendet: Bildschirmbreite abfragen: Eine kleine Bildschirm bedeutet noch nicht, dass das Gerät mobil ist. User Agent: […]
Iframe im Responsive Webdesign
Iframes wiedersetzen sich der breitenflexiblen Darstellung. Das Problem tritt vor allem bei Youtube Videos auf. Schade, dass Google hier nichts anbietet, vor allem da Google seit heute ja sehr viel Wert auf mobil-taugliche Webseiten legt – bevorzugt im Responsive Design. Lösungen für CSS gibt es bereits: Smashingmagazine Alistapart Dabei kommen vor allem zwei CSS Klassen […]
Javascript mit Mediaquery im responsive Design verbinden
Mit CSS kann man Eigenschaften mit Mediaqueries abhängig von der Bildschirmgröße ändern – ein wichtiger Bestandteil des responsive Designs. Manchmal will man aber auch bestimmten Javascript Code nur bei einer Bildschirmgröße ausführen. Die Verkettung von Javascript – Codes mit einer Mediaquery kann man über unterschiedliche Techniken erreichen. Zum einen kann man über Javascript oder JQuery […]
Bestehende Webseite responsifizieren
Will man ein bestehendes Layout mobilfähig machen ist dazu einiges nötig. Im einzelnen: Media Query einbauen um von Desktop zu Mobil CSS zu wechseln. Das geht z.B. über folgenden Aufbau Farbe, Typographie und grundsätzliches Layout CSS für Mobil UND Desktop @media screen and (max-width:480px) {Link zur Mobil-CSS Datei} @media screen and (max-width:480px) {Link zu Desktop-CSS […]