Cacher une photo ou un slideshow en résolution smartphone
Vous souhaitez cacher votre beau slideshow "fullscreen" situé sur la page d'accueil de votre site web pour les utilisateurs de smartphones qui naviguent sur de faibles résolutions ?
Grâce au Responsive Design et à Bootstrap, vous pouvez paramétrer l'affichage de n'importe quel bloc en fonction de la résolution de l'écran du visiteur de votre site.
C'est à dire que vous pouvez, par exemple, cacher un slideshow qui prend trop de place (en largeur) lorsqu'on passe sur une petite résolution.
Il suffit d'ajouter la classe .hidden-xs à votre bloc slideshow (ou à votre image, votre galerie de photos, votre video etc etc...).
En pratique : prenons une belle photo de paysage dans une résolution assez grande (1550 x 420 px)
A VOUS DE JOUER !
- Réduisez le fenêtre de votre écran jusqu'à une largeur inférieure à 768px: cliquez dans le coin inférieur de la fenêtre, laissez appuyer le clic gauche et glissez la souris pour réduire la fenêtre.
- Lorsque vous atteignez une largeur inférieur à 768 pixels, la photo disparaît !
Le code utilisé est le suivant:
<img class="hidden-xs" src="le-lien-de-votre-image.jpg" />
Pourquoi utiliser cette fonctionnalité ?
Lorsqu'un utilisateur utilise son smartphone pour naviguer sur un site Internet, l'affichage du site est réduit au minimum, ce qui laisse peu de place pour afficher du contenu qui, justement, "prend de la place".
Ainsi, il est assez courant de cacher les grosses images, une galerie photo ou un slideshow pour les très petites résolutions ( largeur < 768 px).
Même si la photo s'adapte automatiquement à la taille de la fenêtre au niveau de la largeur et de la hauteur, le fait de l'afficher sur un téléphone mobile n'a que peu d'intérêt puisque sa taille sera trop petite pour être clairement visible.
Source : http://getbootstrap.com/css/#responsive-utilities