Responsive Webdesign: Unterschied zwischen den Versionen
Aus Wikizone
(→Cookie) |
|||
| Zeile 65: | Zeile 65: | ||
) | ) | ||
</pre> | </pre> | ||
| + | |||
| + | ==== adaptive-images.php Skript ==== | ||
| + | Breakpoints anpassen | ||
| + | $resolutions = array(1382, 992, 768, 480, 320); | ||
| + | ==== htaccess ==== | ||
| + | <pre> | ||
| + | Hier die Anpassung für TYPO3, das Original findet man auf adaptive-images.com | ||
| + | <IfModule mod_rewrite.c> | ||
| + | # Enable URL rewriting | ||
| + | RewriteEngine On | ||
| + | Options +FollowSymlinks | ||
| + | # Adaptive Images | ||
| + | # don't apply the AI behaviour to images inside AI's cache folder: | ||
| + | RewriteCond %{REQUEST_URI} !ai-cache | ||
| + | # further directories that shouldn't use AI | ||
| + | RewriteCond %{REQUEST_URI} !fileadmin/images | ||
| + | # Send any GIF, JPG, or PNG request that IS NOT stored inside | ||
| + | # one of the above directories | ||
| + | RewriteRule ^.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L] | ||
| + | . . . | ||
| + | </pre> | ||
| + | |||
| + | </IfModule> | ||
| + | |||
=== 4. Ansatz === | === 4. Ansatz === | ||
<picture> HTML 5 Element soll alles besser machen ;-) | <picture> HTML 5 Element soll alles besser machen ;-) | ||
Version vom 10. Dezember 2013, 16:46 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> )
adaptive-images.php Skript
Breakpoints anpassen
$resolutions = array(1382, 992, 768, 480, 320);
htaccess
Hier die Anpassung für TYPO3, das Original findet man auf adaptive-images.com
<IfModule mod_rewrite.c>
# Enable URL rewriting
RewriteEngine On
Options +FollowSymlinks
# Adaptive Images
# don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache
# further directories that shouldn't use AI
RewriteCond %{REQUEST_URI} !fileadmin/images
# Send any GIF, JPG, or PNG request that IS NOT stored inside
# one of the above directories
RewriteRule ^.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L]
. . .
</IfModule>
4. Ansatz
<picture> HTML 5 Element soll alles besser machen ;-)
