Forum - En vrac ! - Iframes responsives
le 21/09/2017 @ 23:21
par han
Bonsoir Jean-Denis,
En suivant ton excellent tuto, j'ai réussi à créer une iframe responsive.
J'aurais cependant une petite question : l'frame, que j'ai créée, fait 400 x 300.
Est-ce possible qu'elle s'affiche, sur PC ou tablette, avec ses dimensions propres ?
Car en suivant ton tuto, on peut :
- soit lui faire tenir la largeur totale de la page ;
- soit un % de la largeur totale : ma page faisant 740px de large, il est vrai que je pourrais fixer le % à 54 % (ce qui correspond à 400px) mais sur smartphone, à ce moment-là, il n'occupera aussi que 54% de la largeur ?
Ai-je loupé quelque chose dans tes explications ?
Cordialement.
Rectifié par han le 21/09/2017 @ 23:54
--------
le 22/09/2017 @ 07:41
par JeanDenis
Administrateur
Bonjour Han,
Merci pour le commentaire sur cet "excellent tuto"
Citation : « Han »
Est-ce possible qu'elle s'affiche, sur PC ou tablette, avec ses dimensions propres ?
Si je comprends bien, tu souhaiterais qu'il s'affiche avec 400x300 ?
Dans ce cas, autant placer un Iframe "standard" qui aura cette dimension.
Un Iframe responsive est sensé s'adapter à la fenêtre dans laquelle il s'affiche.
La partie :
<div style="margin: auto; width:54%"> </div>
sert simplement si tu souhaites peaufiner l'affichage en n'occupant pas toute la largeur de la page (ce div n'est pas obligatoire - reporte-toi au tutoriel -).
D'ailleurs, je viens de voir que tu as mis 95% (en ligne).
... Et les valeurs height="300" et width="400" servent à fixer les dimensions minimales de l'Iframe responsive ( là encore, reporte-toi au tutoriel ).
Elles peuvent être donc plus faibles si tu souhaites que l'Iframe s'affiche correctement dans une résolution de 320px en mode portrait ( résolution que je n'avais pas testée dans nos MP ).
Cordialement,
--------
le 23/09/2017 @ 00:03
par han
Bonsoir Jean-Denis,
Donc, avec cette méthode, l'image occupera le même "espace" que tu sois sur PC, tablette ou smartphone :
- si tu déclares un pourcentage, ex 54 %, l'image occupera 54 % de la largeur de l'écran sur PC, tablette ou smartphone (enfin, c'est ce que donne mon essai).
- si tu ne déclares pas de pourcentage, elle occupera toute la largeur de l'écran sur PC, tablette ou smartphone.
C'est bien ça ?
En fait, je pensais que ça fonctionnait comment pour les photos avec cette astuce :
Lorsque tu insères une image dans un document avec CKEditor, dans les propriétés de l'image tu as un onglet Avancé, dans lequel il y a un champ Style et un autre Classe CSS.
Cas Style : width: 100%; max-width: NNNpx; (NNN étant la largeur à afficher en WEB)
Le width à 100% va permettre d'afficher l'image sur toute la largeur du smartphone, ou de la tablette, le max-width ayant la largeur réelle à afficher limitera un affichage démesuré.
Cette technique est-elle possible avec une Iframe ?
Cordialement
--------
le 23/09/2017 @ 06:54
par JeanDenis
Administrateur
Bonjour Han,
Citation : « Han »
- si tu déclares un pourcentage, ex 54 %, l'image occupera 54 % de la largeur de l'écran sur PC, tablette ou smartphone (enfin, c'est ce que donne mon essai).
- si tu ne déclares pas de pourcentage, elle occupera toute la largeur de l'écran sur PC, tablette ou smartphone.
C'est bien ça ?
Tout à fait...
C'est un peu la même chose que pour les photos, sauf qu'il faut que tu affiches un % en largeur de 100 ( ou autre % ) et que tu laisses vide la hauteur.
Dans les Iframes standards de GuppY, il faut fixer une largeur en %, mais une hauteur en px ce qui peut s'avérer inesthétique...
D'où les Iframes responsives !
Tu peux malgré tout "améliorer" ton affichage en plaçant le code de l'Iframe dans un div en lui donnant des valeurs maximales et minimales :
<div style="margin: auto; width:95%; max-width:800px; min-width:280px;"> </div>
pour éviter un affichage "démesuré" sur ordinateur et trop petit sur smartphone...
évidemment, si tu ne mets pas width:95% ou si tu mets width:100% cela revient au même et ton Iframe responsive occupera toute la largeur disponible dans les limites du max-width...
Cordialement,
Rectifier message Clôturer sujet Remonter