Media Queries in SVG-Dateien

CSS Media Queries können auch in SVG-Dateien verwendet werden

Diese Technik funktioniert derzeit im Firefox, Safari und Google Chrome. Fenstergröße verändern CSS in der SVG-Datei <svg width="100%" height="100%" ...> <style type="text/css"> @media (max-width: 140px) { .c {fill: #f0f} } @media…

iPhone & iPad graue Hintergrundfarbe beim Klicken anpassen

Safari tap color ändern

Die tap color in iOS-Geräten kann für klickbare Elemente verändert werden: <style type="text/css"> html {-webkit-tap-highlight-color: rgba(0, 255, 0, .4);} </style> Beispiel Mit iPhone oder iPad hier Klicken: iPhone & iPad tap color

iPhone und iPad Hover-Effekt

Hover-Workaround mit ontouch für iOS

Hover-Effekte können sehr hilfreich sein. Gerade bei mobilen Geräten ist dies aber oft ein Problem. Hiermit lassen sich einfache :hover-Pseudoklassen mit ontouch darstellen: <script type="text/javascript"> if ("ontouchstart" in…

jQuery Click-Event iPhone iPad

Click-Event auch für iOS

Hier mit dem iPhone/iPad Klicken jQuery click touchstart <script type="text/javascript"> $(".example").on("click touchstart", function() { alert('klick'); }); </script>

iOS-Simulator

Responsive Webdesign iPad- & iPhone-Simulator

Für die Optimierung mobiler Webseiten im iPad und iPhone eignet sich der iOS-Simulator. Dieses Programm ist ein Bestandteil von Xcode welches über den App Store installiert werden kann. Das Programm befindet sich hier unter folgenden Pfad.…