En resum
Què es comprova
l’etiqueta viewport i el comportament real de la pàgina a 375 px (mòbil) i 768 px (tauleta).
Resultat esperat
el contingut cap a l’amplada disponible sense desplaçament horitzontal i sense que el navegador l’hagi d’encongir.
Per què importa
Google indexa i posiciona amb la versió mòbil de la teva web, rastrejada amb el seu agent de telèfon intel·ligent.
Severitat a Wakaris
Crític. Falla al 23 % de les pàgines analitzades.
Què és i què comprova aquesta troballa
Aquesta troballa salta quan la teva pàgina no s’adapta a l’amplada de la pantalla en què es mostra. Wakaris la detecta amb tres evidències: si l’etiqueta viewport està configurada, i si la pàgina es comporta bé quan es carrega a 375 píxels d’amplada, que és la mida d’un mòbil habitual, i a 768 píxels, que és la d’una tauleta en vertical.
L’etiqueta viewport és una línia a la capçalera de l’HTML que indica al navegador del mòbil com ha de dimensionar la finestra de visualització. Segons MDN, sense ella alguns dispositius dibuixen la pàgina en una finestra virtual més ampla que la pantalla i després l’encongeixen perquè hi càpiga: en un mòbil de 640 píxels es pot dibuixar a 980 i reduir-se després.
Ser responsive és el contrari d’aquest encongiment: el disseny es reorganitza segons l’espai disponible, les columnes s’apilen, les imatges s’ajusten i el text conserva una mida llegible.
Com es comprova
Wakaris carrega l’URL que li indiquis en dues amplades diferents, 375 i 768 píxels, i observa què passa amb el contingut en cadascuna. Si hi ha elements que surten de l’amplada disponible i provoquen desplaçament horitzontal, o si la pàgina no es reorganitza i apareix encongida, l’evidència corresponent falla. A part, llegeix la capçalera de l’HTML i comprova si l’etiqueta viewport existeix i està configurada per fer servir l’amplada del dispositiu. L’informe et diu quina de les tres evidències ha fallat i a quina pàgina, sense instal·lar res.
La configuració que recomanen tant la documentació de MDN com la de Google és width=device-width, initial-scale=1. La primera part indica al navegador que faci servir l’amplada real del dispositiu; la segona fixa una relació 1:1 entre els píxels de CSS i els del dispositiu, sigui quina sigui l’orientació.
És una troballa binària: la pàgina s’adapta o no. L’informe no dona una xifra sinó el resultat de cada comprovació.
Per què importa
Importa per dos motius, i el segon pesa més del que sembla.
El primer és qui visita la web des d’un mòbil. Si la pàgina es mostra encongida, el text queda il·legible i els botons, massa petits per al dit. Si el contingut surt per la dreta, cal desplaçar-se de costat per llegir cada línia. web.dev ho resumeix així: no s’ha d’obligar ningú a desplaçar-se horitzontalment ni a allunyar el zoom per veure la pàgina sencera.
El segon és el posicionament. Google documenta que fa servir la versió mòbil del contingut, rastrejada amb l’agent de telèfon intel·ligent, per indexar i posicionar: la indexació mobile-first. El que la teva web mostra al mòbil és el que Google avalua. Afegeix que adaptar-se al mòbil no és obligatori per aparèixer als resultats, però ho recomana molt encaridament, i que el disseny responsive és el patró que aconsella.
Hi ha a més una dimensió d’accessibilitat: el criteri 1.4.10 de les WCAG 2.2, de nivell AA, demana contingut sense desplaçament en dues dimensions a una amplada equivalent a 320 píxels de CSS.
Causes habituals
Les causes s’agrupen en tres famílies; convé identificar la teva abans de tocar res.
La primera és l’etiqueta viewport absent o mal configurada. És la més habitual en webs antigues o muntades a mà: sense ella, el navegador mòbil encongeix tota la pàgina. També falla quan l’etiqueta fixa una amplada en píxels en lloc de la del dispositiu.
La segona és el contingut amb amplades fixes. Una imatge de 1.200 píxels sense límit de mida, una taula amb columnes d’amplada fixa, un vídeo incrustat amb dimensions absolutes o un contenidor amb width en píxels surten de l’espai disponible i provoquen desplaçament horitzontal, encara que l’etiqueta viewport estigui bé.
La tercera és l’absència de punts de ruptura, és a dir, de regles CSS que canviïn la disposició segons l’amplada. Un disseny de tres columnes que no s’apila al mòbil obliga cada columna a cabre en 125 píxels, i el resultat és text il·legible o columnes que es desborden. Sol venir de plantilles velles o de seccions afegides sense revisar al mòbil.
Com solucionar-ho
El primer és saber quina de les tres evidències ha fallat, perquè l’arranjament és diferent. Wakaris t’ho indica a l’informe; a partir d’aquí, de menys a més esforç.
Si falta l’etiqueta viewport, afegeix-la a la capçalera de l’HTML amb width=device-width, initial-scale=1. Sol resoldre l’encongiment de cop. No hi afegeixis user-scalable=no: MDN adverteix que impedir el zoom deixa fora les persones amb baixa visió.
Si el problema és el contingut que es desborda, substitueix les amplades fixes per relatives. web.dev recomana donar a les imatges un max-width del 100 %, que les encongeix perquè hi càpiguen sense estirar-les. Per a vídeos, taules i iframes, un contenidor amb desplaçament propi evita que arrosseguin tota la pàgina.
Si el disseny no es reorganitza, calen consultes de mitjans que apilin les columnes a partir de certa amplada. web.dev aconsella no fixar els punts de ruptura per dispositiu o marca, sinó deixar que el contingut marqui on deixa de llegir-se bé.
Comparació d’una pàgina sense etiqueta viewport, encongida a una amplada virtual de 980 píxels, davant la mateixa pàgina amb l’etiqueta i el text llegible
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Comparació d’una pàgina sense etiqueta viewport, encongida a una amplada virtual de 980 píxels, davant la mateixa pàgina amb l’etiqueta i el text llegible. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: comparació, pàgina, sense, etiqueta, viewport, encongida, amplada, virtual
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i la vull solucionar
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Adaptació responsive. Comprova si la meva pàgina s’adapta a l’amplada de la pantalla: si l’etiqueta viewport està configurada i si el contingut hi cap sense desplaçament horitzontal quan es carrega a 375 píxels (mòbil) i a 768 píxels (tauleta). Referència: l’etiqueta viewport ha de fer servir l’amplada del dispositiu i la pàgina no s’ha de desbordar ni veure’s encongida en cap de les dues amplades. Enganxa aquí el resultat de Wakaris: quina evidència ha fallat (viewport, 375 px o 768 px), a quina pàgina i, si ho indica, quin element es desborda. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per fet sobre la meva web. Tota dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra) b) De les tres comprovacions, quina ha fallat: l’etiqueta viewport, la vista a 375 píxels, la de 768, o diverses? c) Quan obres la pàgina en un mòbil, es veu tot molt petit, o es veu a bona mida però cal desplaçar-se de costat? d) La pàgina té taules, vídeos incrustats, mapes o imatges molt amples? e) La plantilla o el tema és recent, o fa anys que no s’actualitza? f) Pots editar l’HTML i el CSS de la web, o depens d’un editor visual? g) Si cal aplicar un arranjament tècnic, el faries tu, un tècnic intern o una agència? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si em recomanes alguna cosa, explica’m per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots mesurar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. No em proposis canvis tècnics irreversibles o de risc (configuració de servidor, esborrar recursos, canvis directes en producció) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Si necessites una dada que només s’obté comprovant la web (confirmar el resultat real, la pàgina exacta, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es comprova, no s’endevina. 7. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 8. Si l’arranjament excedeix el que puc fer jo, o l’executarà un equip, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/ux/adaptacion-responsive Per comprovar-ho o tornar-ho a comprovar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
Encara no ho he mesurat i vull comprovar si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Adaptació responsive. Una web responsive s’adapta a l’amplada de la pantalla: no cal fer zoom ni desplaçar-se de costat per llegir-la. Es comprova carregant la pàgina a 375 píxels (mòbil) i a 768 (tauleta) i revisant l’etiqueta viewport de la capçalera. Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es COMPROVA sobre la pàgina real, i tu no pots comprovar la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que ho tens" o "no ho tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per estimar si és probable que tingui el problema: a) Quan obres la teva web en un mòbil, el text es llegeix a bona mida o surt tot molt petit i has d’ampliar? b) T’has de desplaçar cap als costats per llegir alguna part de la pàgina? c) La web té diverses columnes a l’escriptori? S’apilen una sota l’altra al mòbil o continuen una al costat de l’altra? d) Té taules, vídeos incrustats, mapes o imatges grans? e) De quin any és el disseny o la plantilla, aproximadament? f) En quina plataforma està? (WordPress, Shopify, web a mida, una altra; o no ho sé) 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Digues-me de manera directa que l’única manera de saber-ho de debò és comprovar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà el resultat real, quina comprovació falla i a quina pàgina i de passada l’estat de les altres àrees. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més ràpid, sobre la pàgina real i amb informació addicional que a mà no obtinc. 6. Si en comprovar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com solucionar-lo en el meu cas concret. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/ux/adaptacion-responsive Per comprovar-ho: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
Què és l’etiqueta viewport i quin valor ha de tenir? +
És una línia a la capçalera de l’HTML que indica al navegador mòbil com dimensionar la finestra de visualització. El valor recomanat per MDN i per Google és width=device-width, initial-scale=1: fa servir l’amplada real del dispositiu i fixa una escala inicial d’u a u entre píxels de CSS i de pantalla.
Per què Wakaris comprova a 375 i a 768 píxels? +
Perquè són dues amplades representatives: 375 píxels correspon a un mòbil habitual en vertical i 768 a una tauleta en vertical. Si la pàgina s’adapta bé en totes dues, és molt probable que ho faci a les mides intermèdies. Comprovar dues amplades permet distingir una fallada només al mòbil d’un disseny que no s’adapta en absolut.
Una web que no és responsive pot aparèixer a Google? +
Sí. Google documenta que adaptar-se al mòbil no és obligatori per ser als resultats, tot i que ho recomana molt encaridament. El que sí que és un fet és que indexa i posiciona amb la versió mòbil del teu contingut, així que el que es vegi malament o falti al mòbil és el que Google avalua.
N’hi ha prou d’afegir l’etiqueta viewport per arreglar-ho? +
Resol l’encongiment general de la pàgina, que és el símptoma més visible, però no arregla el contingut amb amplades fixes ni un disseny que no reorganitza les columnes. Si aquestes dues evidències també fallen, l’etiqueta sola pot fins i tot fer més evident el desbordament. Convé tornar a passar la pàgina per Wakaris després de cada canvi.
Fonts citades
- developer.mozilla.org<meta name="viewport">, MDN Web Docs: què fa l’etiqueta viewport, el valor recomanat, la finestra virtual de 980 píxels i l’advertiment sobre deshabilitar el zoom.
- web.devResponsive web design basics, web.dev: comportament del navegador mòbil sense l’etiqueta,
width=device-width, initial-scale=1, imatges ambmax-widthdel 100 % i elecció de punts de ruptura segons el contingut. - developers.google.comMobile-first indexing best practices, Google Search Central: indexació i posicionament amb la versió mòbil rastrejada per l’agent de telèfon intel·ligent, i recomanació del disseny responsive.
- w3.orgUnderstanding Success Criterion 1.4.10: Reflow, W3C WAI: contingut sense desplaçament en dues dimensions a una amplada equivalent a 320 píxels de CSS, nivell AA.
Actualitzat: 7 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.