Responsive Webdesign: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 39: | Zeile 39: | ||
}); | }); | ||
</pre> | </pre> | ||
| + | |||
| + | === 3. Ansatz - adaptive-images.com Script === | ||
| + | ==== Funktionsweise ==== | ||
| + | * Über Cookie beim 1. Aufruf max Bildschirmgröße (also nicht der Viewport sondern real mögliche Pixel) abrufen und speichern. | ||
| + | * Alle Bildanfragen werden über htaccess an ein PHP-Skript geschickt | ||
| + | * PHP Skript entscheidet anhand Cookie welche Größe benötigt wird. Das Bild wird über GDlib erzeugt und im Ordner ai-cache/Bildgröße gespeichert | ||
| + | * Bei weiteren Aufrufen wird das Bild direkt aus dem Cache geholt. | ||
| + | ==== Cookie ==== | ||
| + | <pre> | ||
| + | <script> | ||
| + | document.cookie='resolution='+Math.max(screen.width,screen.height)+'; | ||
| + | path=/'; | ||
| + | </script> | ||
| + | </pre> | ||
| + | |||
| + | Bzw. für TYPO3 TS | ||
| + | <pre> | ||
| + | #TypoScript setup | ||
| + | page.headTag ( | ||
| + | <head> | ||
| + | <script> | ||
| + | document.cookie='resolution='+Math.max(screen.width,screen.height)+'; | ||
| + | path=/'; | ||
| + | </script> | ||
| + | ) | ||
| + | </pre> | ||
| + | === 4. Ansatz === | ||
| + | <picture> HTML 5 Element soll alles besser machen ;-) | ||
Version vom 10. Dezember 2013, 16:08 Uhr
Siehe auch
Links
http://typo3blogger.de/responsive-design-mit-typo3/
Media Queries
Verschiedene Geräte unterscheiden mit Media Queries
Adaptive Images
Quellen:
http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12)
1. Ansatz - Relative Breitenangabe
img { max-width: 100%; height: auto; }
Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen.
2. Ansatz - noscript
Bilder werden im noscript Teil referenziert. Der JavaScript fähige Browser lädt diesen Teil nicht. Danach kann man mit JavaScript zugreifen (hier mit jQuery)
HTML
<noscript data-large="Koala.jpg" data-small="Koala-small.jpg" data-alt="Koala"> <img src="Koala-small.jpg" alt="Koala" /> </noscript>
JavaScript
$('noscript[data-large][data-small]').each(function(){
var $this = $(this);
var src = screen.width >= 480 ? $this.data('large') : $this.data('small');
$('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($this);
});
3. Ansatz - adaptive-images.com Script
Funktionsweise
- Über Cookie beim 1. Aufruf max Bildschirmgröße (also nicht der Viewport sondern real mögliche Pixel) abrufen und speichern.
- Alle Bildanfragen werden über htaccess an ein PHP-Skript geschickt
- PHP Skript entscheidet anhand Cookie welche Größe benötigt wird. Das Bild wird über GDlib erzeugt und im Ordner ai-cache/Bildgröße gespeichert
- Bei weiteren Aufrufen wird das Bild direkt aus dem Cache geholt.
Cookie
<script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script>
Bzw. für TYPO3 TS
#TypoScript setup page.headTag ( <head> <script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script> )
4. Ansatz
<picture> HTML 5 Element soll alles besser machen ;-)
