El principal problema relacionat amb el canvi de la finestra HTML a la mida del telèfon intel·ligent és que pot fer que el lloc web no respongui o es mostri incorrectament. Això es deu al fet que quan es canvia la finestra gràfica, és possible que el lloc web no estigui optimitzat per a una mida de pantalla més petita i pot ser que no es pugui reduir adequadament el seu contingut. A més, és possible que algunes funcions no funcionin correctament en una mida de pantalla més petita, com ara menús de navegació o elements interactius.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Aquesta línia de codi és una metaetiqueta, que proporciona informació sobre el document HTML al navegador.
2. L'atribut name s'estableix en "viewport", que indica al navegador que aquesta etiqueta conté informació sobre com s'ha de mostrar la pàgina en diferents dispositius.
3. L'atribut de contingut s'estableix a “width=device-width, initial-scale=1.0”, que indica al navegador que hauria d'utilitzar l'amplada del dispositiu com a amplada de la pàgina i escalar-la amunt o avall a partir d'aquí si cal.
Disseny Web Sensible
El disseny web responsiu és un enfocament del disseny web que fa que les pàgines web es mostrin bé en diversos dispositius i mides de finestres o pantalles. Utilitza una combinació de quadrícules i dissenys flexibles, imatges i un ús intel·ligent de consultes multimèdia CSS. Els llocs web responsius estan dissenyats per oferir una experiència de visualització òptima (lectura i navegació fàcils amb un mínim de canvi de mida, panoràmica i desplaçament) en una àmplia gamma de dispositius (des de monitors d'ordinadors d'escriptori fins a telèfons mòbils).
En HTML, el disseny responsiu es pot aconseguir mitjançant les tècniques següents:
• Graelles flexibles: l'ús d'unitats relatives com percentatges o ems en lloc d'unitats d'amplada fixa com els píxels per als elements de disseny permet que la pàgina s'adapti de manera flexible a diferents mides de pantalla.
• Consultes multimèdia: les consultes multimèdia CSS3 permeten als desenvolupadors especificar diferents estils per a diferents amplades del dispositiu. Això permet que el disseny de la pàgina s'ajusti en conseqüència segons el dispositiu que s'utilitzi.
• Imatges responsives: les imatges es poden fer responsives utilitzant l'atribut srcset d'HTML5 que permet als desenvolupadors especificar diverses versions d'una imatge amb diferents resolucions per a diferents dispositius.
• Vídeos flexibles: els vídeos també es poden fer responsius mitjançant la propietat d'ajust d'objectes a CSS, que permet als desenvolupadors especificar com s'han d'escalar els vídeos dins dels seus contenidors en funció de la seva mida.
Metaetiqueta de la finestra gràfica
La metaetiqueta de la finestra gràfica és un element HTML que indica al navegador com ajustar les dimensions i l'escala de la pàgina per adaptar-se al dispositiu que s'utilitza. S'utilitza per controlar com es veu una pàgina web en diferents dispositius, com ara telèfons intel·ligents i tauletes. La metaetiqueta de la finestra gràfica es pot utilitzar per definir l'amplada d'una pàgina web, escalar-la cap amunt o cap avall i especificar si els usuaris poden ampliar o reduir l'ample. També es pot utilitzar per establir l'escala inicial, l'escala màxima, les propietats escalables per l'usuari i molt més.
Com puc fer que el meu lloc web s'ajusti a la pantalla del meu telèfon
Per fer que un lloc web s'ajusti a la pantalla del telèfon en HTML, podeu utilitzar la metaetiqueta de la finestra gràfica. Aquesta etiqueta us permet controlar com es mostra el vostre lloc web en diferents dispositius. Podeu establir que l'amplada de la finestra gràfica sigui igual a l'amplada del dispositiu, de manera que el vostre lloc web ajustarà automàticament la seva mida per adaptar-se a la pantalla de qualsevol dispositiu. A més, també podeu utilitzar les consultes multimèdia al vostre codi CSS per personalitzar encara més com es veu el vostre lloc web en diferents dispositius.
