Site-ul arată diferit pe telefon decât pe calculator — de ce și cum repari

Deschizi site-ul pe calculator și totul e la locul lui. Îl deschizi apoi pe telefon și dintr-o dată textul iese din ecran, imaginile sunt tăiate, butoanele se suprapun, iar meniul a dispărut. Prima reacție e firească: „E stricat site-ul?" sau „E telefonul meu de vină?".

Vestea bună: în cele mai multe cazuri nu e nici telefonul tău, nici o defecțiune gravă. E o problemă de design responsive — modul în care site-ul se adaptează la lățimi diferite de ecran. Un calculator are ~1400px lățime, un telefon are ~380px. Dacă site-ul nu a fost construit să se rearanjeze la lățimi mici, se rupe. În acest articol îți explic exact ce se întâmplă, care sunt cauzele reale și cum se repară, ca să poți vorbi în cunoștință de cauză cu cine ți-a făcut site-ul.

De ce arată un site diferit pe telefon (pe scurt)

Un site nu are o singură „poză" fixă. Browserul primește codul și îl aranjează în funcție de spațiul disponibil. Pe un ecran lat are loc să pună lucrurile unele lângă altele; pe un ecran îngust ar trebui să le pună unele sub altele.

Asta se numește design responsive: același conținut, aranjament diferit în funcție de lățime. Când e făcut corect, pe telefon meniul devine un buton „hamburger", coloanele se așază pe verticală, iar textul rămâne lizibil fără să dai zoom.

Când NU e făcut corect, browserul încearcă să înghesuie aranjamentul de desktop într-un ecran mic. De aici vin exact simptomele pe care le vezi: text care iese din ecran, imagini tăiate, elemente suprapuse. Nu e o defecțiune aleatorie — e lipsa unei reguli care să spună site-ului „pe ecran mic, aranjează-te altfel".

Cele mai frecvente 5 cauze ale unui layout stricat pe mobil

În practică, aproape toate problemele de mobil vin din câteva cauze clare:

• Lățimi fixe în pixeli: un element setat pe „1000px lățime" nu încape pe un ecran de 380px și împinge pagina în lateral, creând acea bară de scroll orizontal enervantă.
• Lipsa meta tag-ului „viewport": fără linia care spune browserului să folosească lățimea reală a telefonului, site-ul e afișat micșorat, ca o pagină de desktop văzută de departe.
• Imagini fără limită de lățime: o poză mare nu se micșorează și iese din ecran.
• Text și butoane prea mici sau prea apropiate: greu de citit, greu de apăsat cu degetul.
• O temă sau un template „responsive" doar pe hârtie: multe șabloane gata făcute se rup imediat ce adaugi conținutul tău real (texte lungi, poze de alt raport).

Dacă recunoști scroll-ul orizontal sau textul care „fuge", aproape sigur e una dintre primele două.

Cum verifici singur, în 2 minute, fără cunoștințe tehnice

Nu trebuie să fii programator ca să diagnostichezi. Fă asta:

• Deschide site-ul pe telefon și încearcă să tragi pagina spre stânga/dreapta. Dacă se mișcă lateral și apare spațiu gol, ai un element mai lat decât ecranul — cauza clasică.
• Verifică dacă trebuie să dai zoom (pinch) ca să citești. Dacă da, probabil lipsește viewport-ul.
• Pe calculator, deschide site-ul și micșorează fereastra browserului trăgând de margine până devine îngustă cât un telefon. Un site responsive se rearanjează pe măsură ce îngustezi; unul stricat rămâne blocat sau taie conținut.

Fă câteva capturi de ecran cu problemele exacte (meniul, un buton, o secțiune anume). O să-ți fie mult mai ușor să-i arăți cuiva ce anume e greșit decât să descrii în cuvinte.

Ce înseamnă să repari cu adevărat problema (nu doar să o ascunzi)

Există două feluri de „reparații". Cele proaste ascund simptomul: micșorează totul până intră pe ecran, sau ascund pur și simplu elementele care deranjează pe mobil. Rezultatul? Un site pe care nu se poate citi nimic sau din care lipsesc bucăți importante.

Reparația corectă înseamnă ca aranjamentul să fie regândit pentru mobil: coloanele se așază pe verticală, meniul devine compact, textul rămâne la o mărime lizibilă, butoanele sunt suficient de mari pentru deget, iar imaginile se scalează în loc să iasă din ecran.

În practică asta se face prin „media queries" — reguli în cod care spun „sub 768px, aranjează-te așa". Nu e muncă uriașă pentru cineva care știe, dar cere ca site-ul să fie gândit mobile-first, nu peticit după. Peste jumătate din vizitatorii unui site local vin de pe telefon, deci mobilul nu e un caz secundar — e cazul principal.

Când merită refăcut și cum lucrăm noi la MPO

Uneori un site vechi se poate corecta punctual. Alteori tema e atât de rigidă încât fiecare reparație strică altceva — și atunci e mai ieftin, pe termen lung, un site nou construit corect de la început.

La MPO Web Studio construim totul mobile-first: îl gândim mai întâi pentru telefon, apoi îl extindem pe desktop, exact invers față de cum se rup majoritatea site-urilor. Lucrăm remote în toată țara, cu prețuri transparente și fără promisiuni de tip „garantat pe locul 1 pe Google" (dacă cineva îți promite asta, fii precaut).

Dacă vrei, îți facem întâi un demo gratuit — o versiune reală a site-ului tău, pe care o vezi pe telefonul tău înainte să plătești ceva. Trimite-ne un mesaj pe WhatsApp cu adresa site-ului actual și îți spunem exact ce e greșit și ce ar costa să reparăm.