Com fer que un web sigui adaptable al mòbil

Per fer que un web sigui adaptable al mòbil, afegeix una etiqueta meta viewport, construeix el disseny de manera mobile-first amb amplades flexibles i fes servir punts de ruptura CSS per reorganitzar-lo a pantalles més grans —apilant columnes, plegant el menú i escalant les imatges per encaixar-les—. Després revisa cada pàgina a l’amplada d’un mòbil per veure si hi ha desplaçament lateral, text petit o botons massa petits per tocar. En un web creat amb IA, un prompt clar més una revisió en una vista prèvia de mida de mòbil sol arreglar la major part.

Què és realment el disseny adaptable

Un web adaptable fa servir un sol conjunt de pàgines i URL que s’adapten a la pantalla. En lloc d’un lloc «m.» separat, el CSS canvia el disseny a certes amplades, anomenades punts de ruptura (breakpoints). Els blocs de construcció són:

L’etiqueta meta viewport, que indica als navegadors mòbils que han d’usar l’amplada real del dispositiu.
Dissenys fluids que fan servir percentatges, flexbox i grid en lloc d’amplades fixes en píxels.
Media queries (o classes de frameworks com md: de Tailwind) que canvien el disseny a partir d’una amplada donada.
Mèdia flexible: imatges i vídeos que s’encongeixen per encaixar al seu contenidor.

Això importa perquè probablement bona part del trànsit és des de mòbils, i perquè Google indexa la versió mòbil de les pàgines. Si el contingut o els enllaços només existeixen a l’escriptori, Google tampoc els veurà.

Opcions i compromisos

Enfocament	Com funciona	Bo per a	Compromís
Adaptable mobile-first	Estils base per a mòbils i després s’afegeix disseny per a pantalles més amples	Webs i apps noves (recomanat)	Cal pensar primer en petit
Adaptable desktop-first	Estils d’escriptori i després es sobreescriuen per a pantalles més petites	Adaptar un web d’escriptori existent	Més sobreescriptures; el mòbil tendeix a ser una reflexió posterior
Lloc mòbil separat	URL diferents per als mòbils	Rarament justificat avui	Dos llocs per mantenir, complicacions per al SEO
Aplicació web progressiva (PWA)	Web adaptable que es pot instal·lar a la pantalla d’inici	Eines tipus app que s’usen sovint	Configuració addicional; consulta aplicacions natives vs progressives

Mobile-first sol ser més senzill: una sola columna és el disseny més fàcil, i afegir columnes a mesura que hi ha espai és menys feina que treure-les.

Les parts que solen trencar-se

L’etiqueta viewport

Si una pàgina es veu com un web d’escriptori petit en un mòbil, falta l’etiqueta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

No afegeixis maximum-scale=1 ni user-scalable=no. Bloquejar el zoom amb pinça fa el lloc més difícil d’usar per a persones amb baixa visió.

Amplades fixes i desplaçament horitzontal

L’error d’adaptació més habitual és alguna cosa més ampla que la pantalla: un contenidor amb width: 1200px fix, una taula ampla, un URL o un bloc de codi llarg, una imatge sense max-width: 100%. Tota la pàgina llavors es desplaça de costat. Fes servir max-width en lloc de width, deixa que el text faci salts de línia i dona a les coses amples la seva pròpia àrea de desplaçament.

Navegació

Cinc enllaços del menú d’escriptori rarament caben en un mòbil. La resposta habitual és un botó de menú que obre un panell. Mantén visibles les dues o tres accions més importants —«Reserva», «Cistella», «Inicia sessió»— i assegura’t que el menú funciona amb teclat i es tanca fàcilment.

Text i àrees de toc

Un text de cos d’uns 16 px és un mínim raonable en mòbils. Els camps amb text més petit fan que els iPhone facin zoom en tocar-los.
Fes els botons i enllaços fàcils de tocar. WCAG 2.2 AA estableix un mínim de 24 per 24 píxels CSS (o prou espaiat); uns 44 píxels són més còmodes per al polze.
Deixa espai entre enllaços contigus perquè la gent no toqui el que no toca.

Taules i dades

Les taules amples són la part més difícil d’una app adaptable. Opcions, per ordre de preferència: mostrar menys columnes en mòbils, convertir cada fila en una targeta o posar la taula en un contenidor amb desplaçament horitzontal i la primera columna fixada. Tria segons què necessita la gent comparar.

Imatges i mèdia

Fes servir max-width: 100% i height: auto, serveix fitxers més petits a pantalles petites amb srcset, i defineix amplada i alçada per evitar salts en el disseny. Els vídeos i mapes incrustats necessiten un contenidor adaptable perquè mantinguin la proporció. Les imatges més petites també fan les pàgines més ràpides; consulta com fer el teu web més ràpid.

Formularis

Posa les etiquetes sobre els camps, fes els camps d’amplada completa i fes servir els tipus d’entrada adequats (type="email", type="tel", inputmode="numeric") perquè els mòbils mostrin el teclat corresponent. Posa el botó d’enviament on el polze hi arribi i mantén-lo visible quan s’obre el teclat.

Interaccions només amb el ratolí

Els mòbils no tenen hover. Els tooltips, desplegables i vistes prèvies que només apareixen en passar el ratolí són invisibles per als usuaris tàctils. Fes que també funcionin en tocar.

Prompts que funcionen

Per a una construcció nova, digues-ho des del principi:

Construeix-ho mobile-first. Una sola columna als mòbils, dues columnes des de l’amplada de tauleta, disseny complet a l’escriptori. Sense desplaçament horitzontal a 320 px d’amplada, text del cos d’almenys 16 px, àrees de toc d’almenys 44 px, un botó de menú en pantalles petites i taules que es converteixin en targetes als mòbils.

Per a una pàgina existent, descriu el que veus:

En mòbils, la pàgina /pricing es desplaça de costat i les tres targetes de pla estan aixafades una al costat de l’altra. Apila les targetes verticalment per sota de 768 px, fes que la taula de comparació es desplaci horitzontalment dins del seu propi contenidor amb la columna de funcionalitats fixada, i mantén el disseny d’escriptori sense canvis.

Revisa cada pàgina a 375 px d’amplada. Llista tot el que es desbordi, se superposi, tingui text de menys de 16 px o àrees de toc de menys de 44 px, o només funcioni amb el ratolí, i després arregla cadascun.

Pas a pas

Confirma que l’etiqueta viewport és al head de la pàgina.
Prova a 320–375 px d’amplada en el mode de dispositiu del navegador o en una vista prèvia de mida de mòbil. Fes scroll de cada pàgina de dalt a baix.
Arregla primer el desplaçament horitzontal. Troba l’element massa ample; tot la resta és difícil de jutjar fins que no desaparegui.
Ordena la navegació: botó de menú, accions clau visibles.
Revisa text, àrees de toc i formularis a cada flux clau: registre, cerca, pagament, contacte.
Gestiona taules i mèdia: targetes o contenidors amb desplaçament, imatges i incrustacions adaptables.
Revisa les mides intermèdies. Arrossega lentament l’amplada des del mòbil fins a l’escriptori; els dissenys sovint es trenquen cap a l’amplada de tauleta.
Prova-ho en un mòbil real. Els emuladors no detecten coses com el teclat en pantalla que tapa un botó, les escletxes de la pantalla o la velocitat amb què va el lloc amb dades mòbils.

Errors habituals

Provar només una mida de mòbil. Revisa un mòbil petit, un de gran i una tauleta.
Amagar contingut en mòbil perquè càpiga. Google indexa la versió mòbil, i els usuaris de mòbil volen la mateixa informació.
Desactivar el zoom a l’etiqueta viewport.
Imatges de mida d’escriptori en mòbils, que costen temps de càrrega i dades.
Elements fixos que s’acumulen: una capçalera enganxada, un bànner de galetes i una bombolla de xat poden tapar mitja pantalla del mòbil.
Finestres emergents que no es poden tancar en una pantalla petita perquè el botó de tancar queda fora de la pantalla.

Llista de comprovació mòbil

Etiqueta meta viewport present; zoom no desactivat
Sense desplaçament horitzontal a 320 px a cap pàgina
Text del cos d’uns 16 px; els camps no activen el zoom
Àrees de toc còmodament grans i espaiades
El menú funciona en mòbils i amb teclat
Taules llegibles en mòbils (targetes, menys columnes o contenidor amb desplaçament)
Imatges i incrustacions s’escalen; es serveixen fitxers de mida adequada
Els formularis fan servir els tipus d’entrada correctes; el botó d’enviament és accessible
Res d’important depèn del hover
Provat en almenys un mòbil real

El disseny adaptable també és part de l’accessibilitat: WCAG demana que el contingut funcioni a 320 px d’amplada i al 200 % de zoom. Si construeixes una app que la gent farà servir cada dia al mòbil, com construir una app web adaptada al mòbil va més enllà, incloent les PWA instal·lables.

Disseny adaptable a Mythex

Mythex construeix apps web adaptables, i al Pro les pot empaquetar com a apps d’Android i iPhone. Al workspace, fes clic a la icona del telèfon sobre la Preview (Switch to Mobile) per veure la teva app en un marc de mida de mòbil, i arrossega la vora del marc per provar altres amplades (Preview i Code). La documentació té un prompt d’inici breu per arreglar el disseny en pantalles petites a prompts adaptables al mòbil. Comprova-ho també en un mòbil real: obre l’URL publicada, o comparteix un enllaç de vista prèvia i obre’l al teu mòbil.

Preguntes

Què vol dir adaptable al mòbil?

Un web adaptable ajusta el disseny a la pantalla on es veu. La mateixa pàgina i la mateixa URL es reorganitzen per a un mòbil, una tauleta o un escriptori: les columnes s’apilen, les imatges es fan més petites i els menús es planquen, en lloc de mostrar una pàgina d’escriptori encongida o un lloc mòbil separat.

Per què el meu web es veu allunyat en un mòbil?

Gairebé sempre és per la manca de l’etiqueta meta viewport. Sense ella, els navegadors mòbils renderitzen la pàgina com si la pantalla fos d’amplada d’escriptori i després la redueixen. Afegeix una etiqueta viewport amb width=device-width i initial-scale=1.

Per a quines mides de pantalla he de dissenyar?

Dissenya pel contingut, no pels dispositius: comença cap als 320 o 375 píxels d’amplada i afegeix punts de ruptura on el disseny comenci a no quadrar. Frameworks habituals com Tailwind CSS fan servir punts de ruptura per defecte al voltant de 640, 768, 1024 i 1280 píxels.

L’adaptació al mòbil afecta els rànquings de Google?

Google utilitza la versió mòbil de les pàgines per indexar-les, així que el contingut o els enllaços que falten al mòbil poden faltar també a la visió de Google de la pàgina. Un disseny mòbil útil també és important per als Core Web Vitals i per als visitants.