comment ne pas charger les objets sur un petit écran

Question

Je veux que mon blog soit réactif afin qu'il soit bien sur les appareils avec un écran plus petit. Mon ami m'a parlé de cette fonction css appelée "@media screen" qui a bien fonctionné pour moi. Je pourrais utiliser l'affichage : aucun; pour cacher tout ce que je veux sur un petit écran.

mais j'ai alors réalisé que afficher: aucun; seulement masquer les objets mais toujours télécharger les données. ce qui signifie que les visiteurs utilisant un appareil mobile (avec un écran plus petit) doivent télécharger des données autant que ceux qui utilisent un ordinateur. Pauvres les visiteurs mobiles qui doivent télécharger quelques centaines KBS dollars de données pour une bannière qu'ils ne voient pas ...

Alors, voici ma question:

« Y at-il un moyen de faire certains objets (divs) pour ne pas être chargé sur un petit écran? "

Merci

Answer 1

CSS et HTML fonctionne sur le navigateur, après avoir dit que lorsque HTML ou CSS font tout ce qu'ils sont toujours sur le navigateur et sont probablement déjà chargés. le meilleur de ne pas télécharger que DIV est de ne pas l'ajouter dans votre code HTML. Si vous utilisez un langage de script côté serveur tel que PHP ou ASP.NET assurez-vous de les mettre dans un état qui, si sur un appareil mobile, ne les "écho" ou ne les rende pas. une autre façon est que vous utilisez Javascript et ajax, et appelez l'élément sur ondemand, mais encore une fois c'est beaucoup de programmation côté serveur.

Answer 2

Cela dépend de l'implémentation du navigateur mais si l'objet (image par exemple) a un parent avec "display: none;" la plupart des navigateurs ne le téléchargent pas.

Cependant HTML/CSS pour cet objet est bien sûr chargé/analysé, etc et il n'y a pas moyen de contourner.

C'est l'une des raisons pour lesquelles la conception réactive est surestimée IMHO. La version Desktop/Mobile est bien meilleure pour fournir une version allégée de votre site web.

Answer 3

Vous avez dit "sensible". Sens de responsive est que votre site doit être affiché sur toutes les tailles d'écran sur tous les appareils. Il doit donc télécharger toutes les ressources et les afficher/masquer en conséquence.

encore si vous voulez le site léger pour les appareils mobiles, je suggère que vous devriez aller avec le site mobile spécifique

Answer 4

Pour répondre à votre question, donner les éléments (images, divs etc) un nom de classe si vous pouvez les cibler, puis utiliser des requêtes média dans votre CSS.

par exemple
HTML

<p> some text here <img src="#" class="desktop-only"> </p> 

CSS

@media (max-width: 979px) { 

.desktop-only{ 
display:none !important; 
} 

} 

Vous pouvez utiliser toutes les requêtes des médias de combinaison que vous aimez manipuler la mise en page et ce qui est affiché. Plus de détails here

Pour votre information, tout en supprimant ainsi les éléments de la page, ils sont toujours téléchargés par presque tous les navigateurs, donc si la bande passante mobile est une préoccupation majeure pour vous, consultez d'autres options comme Adaptive Images pour redimensionner automatiquement les images.

Bonne chance!