Com fer que el teu web sigui responsive amb la meta tag Viewport
Què significa l'etiqueta meta Viewport?
La finestra de visualització, o viewport en anglès, és la zona visible de la pàgina disponible per a l'usuari sense fer desplaçaments a la pantalla. La mida de la finestra de visualització variarà segons el tipus de dispositiu, des de rellotges intel·ligents fins a ordinadors. L'etiqueta meta Viewport fa que el lloc web s'adequï bé a l'hora de mostrar-se en diferents dispositius. Indica als navegadors com mostrar el lloc en mòbils, tauletes i altres pantalles de dispositius.
De fet, per defecte, els navegadors mòbils mostren la pàgina del lloc de la mateixa manera que en un PC. La raó és que la resolució del dispositiu és més gran que l'amplada del dispositiu. És a dir, si veieu la pàgina des d'un dispositiu mòbil, serà incòmode. Això malmet l'aparença del lloc i fa que no sigui adequat per a l'ús en dispositius mòbils.
↑ Tornar a daltOn afegir l'etiqueta meta Viewport a Drupal?
Heu d'afegir les etiquetes meta a la capçalera (<head>) de cada pàgina que necessiti escalat a la resolució de la pantalla. A continuació, us expliquem pas a pas com fer-ho correctament. Així que posem-nos a treballar!
Obriu el vostre sistema de fitxers amb el vostre editor de codi preferit, situant-vos a l'arrel del vostre Drupal, (generalment la carpeta /web) i des d'allà, aneu a /themes/my_theme/templates. Després, comproveu si el vostre theme té un fitxer anomenat html.tpl.php. Arribats a aquest punt hi ha dues opcions possibles:
- Si has trobat aquest arxiu al teu theme, estàs d'enhorabona. Més endavant t'explicarem com modificar-lo.
- Si aquest fitxer no es troba al teu theme, el pots copiar d'aquesta carpeta: web/core/modules/system/templates i enganxar-ho a la carpeta templates del teu theme.
Ara només heu d'obrir el vostre arxiu html.html.twig i afegir la següent línia de codi, entre les etiquetes <head> i </head>:
<meta name="viewport" content="initial-scale=1.0, width=device-width" />El resultat, hauria de ser molt semblant a això (veure la línia número 6):
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes }}>
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
#}
<a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token }}">
</body>
</html>El pas següent és netejar la memòria cau al lloc de Drupal. Per fer això, aneu al menú d'administració, després a Configuració, després a Rendiment, i feu clic al botó Netejar totes les memòries cau. Si teniu Drush, podeu executar drush cr des de la vostra terminal.
I això seria tot. O quasi. L'últim pas crucial és provar el vostre lloc. La manera més senzilla de fer-ho és amb el navegador Chrome. Obriu al vostre lloc web al Chrome, feu clic amb el botó dret i seleccioneu Inspecciona. Us apareixerà una finestra nova a la part inferior del navegador. Feu clic a la icona del telèfon mòbil per veure si el vostre lloc és responsiu i es mostra correctament.
↑ Tornar a daltEls atributs bàsics de l'etiqueta meta viewport
- Width: estableix l'amplada de la zona visible perquè sigui igual a l'amplada CSS del dispositiu. Podeu especificar el rol de l'amplada del dispositiu per ajustar l'amplada de la pàgina a la mida d'un telèfon intel·ligent o un altre aparell.
- Initial-scale: un atribut que estableix l'escala inicial de la pàgina.
- Height: estableix l'altura de la zona a mostrar per a la visualització. Per establir aquest paràmetre a l'altura del dispositiu, utilitzeu el valor de l'altura del dispositiu.
A més, dins del codi, podeu especificar paràmetres addicionals fent servir l'etiqueta del viewport. Si és necessari, es poden especificar més detalls per evitar que l'usuari faci servir l'escalat i establir opcions quan la plantilla s'adapta automàticament a la orientació de la finestra.
- user-scalable: habilita o deshabilita l'escalat personalitzat de la pàgina, establint-s'hi a Yes o No.
- minimum-scale: escala mínima (de 0.1 a 10).
- maximum-scale: valor màxim de l'escala (de 0.1 a 10).
Com funcionen els dissenys responsius amb l'amplada del dispositiu?
L'atribut width=device-width és una indicació per als navegadors. Això mostra exactament com el navegador ha gestionat la mida de la finestra de visualització. I la probabilitat que tornin a aparèixer les barres de desplaçament horitzontals a la pàgina és zero. Aquesta etiqueta meta del viewport ajuda el navegador mòbil a entendre l'amplada de la finestra de visualització del dispositiu, independentment de la seva orientació.
Un cop el navegador, i especialment el mòbil, ha estat notificat de quina amplada de dispositiu utilitzar, podem realitzar mediaqueries. Aquestes mediaqueries són necessàries per canviar els dissenys i apilar columnes de tal manera que sigui còmode per a tots els usuaris mòbils veure tot el contingut sense barres de desplaçament. Després de completar tots els passos, veure el vostre lloc des de diversos dispositius mòbils serà una experiència molt positiva per als vostres visitants.
↑ Tornar a daltConclusions
L'etiqueta meta del viewport s'utilitza per optimitzar els llocs web per a dispositius mòbils. Permet adaptar la mida de la zona visible de la pàgina a la pantalla del dispositiu del visitant.
El valor més òptim és escalat automàticament l'amplada de la pàgina per ajustar-se automàticament a la pantalla. Podeu establir el factor d'escalat de l'alçada de la pàgina, habilitar o deshabilitar el zoom manual de la pantalla, i així successivament, però això ja triga més temps. Els llocs web que no estan adaptats als dispositius amb pantalles diferents perden la major part del trànsit.
Feu que el vostre lloc sigui responsiu, així el vostre contingut serà fàcil de veure en qualsevol dispositiu. Com que la majoria dels navegadors ara admeten l'etiqueta meta del viewport, no hauríeu de tenir cap problema amb això.
↑ Tornar a daltSobre l'autor/a
Apassionada del desenvolupament front-end i del disseny gràfic, a més de ser consultora d'accessibilitat web. En la meva doble vessant de desenvolupadora i dissenyadora m'agrada incorporar les darreres tendències de disseny web i portar-les terme en tots els nostres projectes.
Deixa el teu comentari