responsive

Media Queries in SVG-Dateien

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…

tap color

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

SVG Darstellungsfehler

SVG wird im Browser pixelig oder unscharf dargestellt

SVG Darstellungsfehler korrigieren

Bei der Skalierungen sieht die Darstellung von SVGs manchmal pixelig oder verschwommen aus. Das Entfernen der width und height kann hierbei hilfreich sein. Durch das Fehlen der Werte berechnet der Browser die Grafik neu und die Darstellungsfehler verschwinden. <svg…

iPhone und iPad Hover-Effekt

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 touchstart

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>

iPhone-Simulator

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.…

Impressum