web-dev-qa-db-fra.com

Lors de l'utilisation de requêtes @media, un téléphone charge-t-il des requêtes et des images non pertinentes?

Si je base mon CSS sur le style mobile, puis j'utilise des requêtes @media Pour des affichages progressivement plus grands (tablettes, ordinateurs de bureau, etc.), les appareils mobiles utiliseront-ils les styles de bureau?

Je pense que les appareils mobiles chargent généralement toutes les images même s'ils ne s'appliquent pas à sa propre taille de support. Cela signifie qu'il chargera toutes les images et masquera celles qui ne correspondent pas à sa feuille de style basée sur les requêtes.

Ce que j'essaie de faire, c'est d'utiliser un arrière-plan pour la version plus grande du site:

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

et un autre pour la version mobile:

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

Si j'applique le CSS mobile avant toute requête multimédia et que j'ajoute le CSS multimédia important ci-dessous à l'aide d'une requête comme @media screen and (min-device-width: 481px) {...}, les appareils mobiles chargeront-ils également la grande image?

cssmobilepage-load-time
39
ChaBuku Bakke

Le comportement dépend du navigateur, mais iOS Safari et Android Chrome respectera les requêtes multimédias et téléchargera uniquement les images d'arrière-plan pour les requêtes multimédias applicables).

Si vous souhaitez inspecter ce comportement, essayez de charger la page avec Mobitest ( http://mobitest.akamai.com/ ) ou un périphérique captif.

Si vous utilisez des fichiers CSS séparés (et je vous conseille vivement de ne pas le faire également), le navigateur téléchargera chacun d'eux même s'il n'en a pas besoin, c'est une limitation du CSSOM. Certains navigateurs, par exemple Les versions basées sur WebKit et Blink donnent la priorité aux feuilles de style afin que celles nécessaires au rendu de la page soient téléchargées en premier et les autres ultérieurement.

Une chose à surveiller est l'affichage: aucun sur les images de contenu car cela n'empêchera pas le téléchargement dans de nombreuses situations. Tim Kadlec explore plus ceci ici: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

36
Andy Davies

Tim Kadlec a mis en place des recherches impressionnantes pour cela - Media Query & Asset Downloading Results

Votre question spécifique est répondue dans le test n ° 4 - les résultats sont inégaux. Mieux vaut avoir des requêtes multimédias pour vos deux images.

8
blogjunkie

Cela semble être largement dépendant du navigateur, mais j'imagine que tout navigateur mobile digne de ce nom essaierait de réduire l'utilisation des données en ne chargeant pas des images (et éventuellement ne chargeant pas des feuilles de style entières) qui sont marquées comme non pour elle. En outre, de nombreux navigateurs mobiles préfèrent ne pas être reconnus comme navigateurs mobiles. Je sais que je déteste quand j'ouvre un site sur mon iPad et une feuille de style mobile m'oblige à afficher un ruban maigre de site à colonne unique sur mon écran de 9,7 pouces.

Les requêtes médiatiques ne sont donc pas fiables, mais elles en valent toujours la peine (elles ne nuisent vraiment à rien, tant qu'elles sont utilisées de manière responsable), et cela n'aide pas ce qui est une question assez obtuse (mais toujours bonne); il est temps de faire des tests!

La plupart des navigateurs de bureau modernes sont fournis avec des outils de développement. Mon favori actuel est l'inspecteur Web sombre et joli de FireFox (la vue 3D est particulièrement à tomber par terre). Mais qu'en est-il sur mobile? La plus grande partie de votre audience mobile ne sera pas sur les navigateurs fournis avec les outils de développement.

Eh bien, vous avez deux options:

  • Firebug Lite a des résultats mitigés sur les navigateurs mobiles, mais est un excellent choix dans la plupart des cas où d'autres inspecteurs ne sont pas disponibles. Cela semble fonctionner dans iOS et d'autres navigateurs mobiles avec prise en charge HTML5, cependant.
  • Cette question suggère d'utiliser quelque chose appelé "weinre". Je ne l'ai jamais utilisé, mais il semble assez légitime.
  • Si vous êtes d'accord pour ne cibler que certains navigateurs, de nombreux DO incluent des outils de développement. Tels que Google Chrome pour Android !

Quoi que vous choisissiez, vous rechercherez une visionneuse d'actifs quelconque; peut-être une vue chronologique. Tout type d'outil qui vous permettra de voir ce que la page a chargé, dans quel ordre elle l'a chargée et combien de temps il a fallu pour la charger.

Bonne chance!

3
Sandy Gifford