Erstellen einer mobilen Webseite mit unterschiedlichem CSS-Stil
Ich würde gerne wissen, ob ich 3 verschiedene CSS-Dateien verwende. Wird der mobile Browser des iPhone / iPad alle 3 Sätze von CSS-Dateien herunterladen oder nur den, der für die Bildschirmgröße relevant ist? indem Sie dies verwenden.
<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">
Ich habe die Antwort von gefundenhttp://www.w3schools.com/html5/html5_app_cache.asp
Selbst wenn Sie 3 verschiedene CSS-Dateien für das Handy haben und CSS auf dem iPhone gespeichert haben, wird die Bandbreite auf nur 1 Download pro CSS minimiert. Dies beschleunigt die Website, während weniger Bandbreite verwendet wird.
Erstellen Sie eine .htaccess-Datei und platzieren Sie diese in.
AddType text/cache-manifest manifest
Erstellen Sie dann eine weitere Datei mit dem Namen demo.manifest und platzieren Sie sie in
CACHE MANIFEST
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css
dann müssen Sie es auf der HTML-Seite deklarieren, indem Sie dies tun.
<html manifest="demo.manifest">
Sobald Sie das CSS und die Dateien aktualisiert haben, müssen Sie nur das demo.manifest und den Browser aktualisieren, indem Sie die neue Version von demo.manifest und den gesamten Inhalt erneut herunterladen.