Criando uma página da web para celular com diferentes estilos de CSS
Eu gostaria de saber se eu uso 3 arquivos css diferentes, o navegador móvel do iPhone / iPad fará o download de todos os 3 conjuntos de arquivos css, ou apenas o que é relevante pelo tamanho da tela? usando isso.
<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">
Eu encontrei a resposta para usar dehttp://www.w3schools.com/html5/html5_app_cache.asp
mesmo se você tiver 3 arquivos css diferentes para o celular, ter css armazenado no iphone, irá minimizar a largura de banda para apenas 1 download de cada css e isso irá acelerar o site usando menos largura de banda.
crie um arquivo .htaccess e coloque-o nele.
AddType text/cache-manifest manifest
em seguida, criar outro arquivo chamado o que você gosta demo.manifest e colocar em
CACHE MANIFEST
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css
então na página html você tem que declarar isto fazendo isto.
<html manifest="demo.manifest">
Uma vez que você atualizar o css e os arquivos, você só precisará atualizar o demo.manifest e o navegador com o download da nova versão do demo.manifest e todo o seu conteúdo mais uma vez.