scalarea problemă de aspect adaptive în browsere mobile

• CSS
• HTML
• Design receptivă
• viewport

Probabil oricine este implicat în aspectul adaptivă (și nu numai adaptiv), știu că site-ul este afișat pe versiunea mobilă a browser-ului (de exemplu, cu privire la dimensiunea lățimii ecranului de 480 pixeli), site-ul nu apare în scara de 1: 1, și „stors“ dimensiunea ferestrei browser-ului. Ie Browser reduce site-ul la o dimensiune care se va potrivi în întregime în fereastra browser-ului. Elementele site-ului devin mai mici, fonturile nu sunt lizibile. Iar utilizatorul trebuie să crească (scala) manual. Dar eu nu accept o astfel de situație. apoi am făcut un aspect adaptiv cu speranța că acesta va fi afișat în browser-ul, în dimensiunea sa reală și nu se contracta din cauza scalarea paginii la dimensiunea ferestrei, și aceasta se datorează blocul de cauciuc. site extern unitate () are o lățime maximă de 900 pixeli, cu capacitatea de a micșora 320. Blocks comprimată în interiorul aceluiași, rearanjat, etc. - nu contează, pentru că nu e vorba de asta. Deci, comprimarea ferestrei browser-ului de pe PC-ul, cu dimensiunea ferestrei este mai mică de 900 de pixeli, site-ul începe să se micșoreze cu succes, datorită dimensiunilor prescrise în css, ca procent din cereri mass-media, etc ... Și atunci când îl deschide pe un dispozitiv mobil, acesta rămâne în dimensiunea sa reală și proporții, ci pur și simplu scalate până la o asemenea măsură încât să se potrivească în fereastra browser-ului.

Încă o dată, problema nu este nou, și, probabil, multe Imposer familiare și eu pot mesteca atât de vanitos, dar doar în cazul, au încercat să descrie în detaliu.

Și Habré a menționat o soluție la această problemă, iar Google nu este dificil. Noi folosim meta viewport tag-ul

care spune browser-ul ca site-ul ar trebui să fie afișate așa cum este, nu la scară în mod automat în timpul pornirii inițiale (apoi degetele, desigur, pot fi scalate, în cazul în care nu-l oprească în aceeași meta-tag). Și dacă, de exemplu, nu este un site adaptiv, iar latimea este mai mare decât lățimea ferestrei browser-ului, acesta va fi, desigur, nu se potrivesc în totalitate, utilizatorul va trebui fie să reducă (scala manual) sau derulați. Și dacă acesta este un site adaptiv, este, așa cum a fost conceput coder, se va micșora datorită blocului de cauciuc cu lățimea ferestrei. Ceea ce în cele din urmă sa întâmplat cu site-ul meu.

Ceea ce sa întâmplat în cele din urmă. Site-ul, lățimea maximă pe care, vă reamintesc 900 pixeli sunt afișate în dimensiune normală de 100% din scala lui. Dar dimensiunea ecranului dispozitivului de 1280 de pixeli! Și în poluchlos final? Și sa întâmplat că site-ul nu este ocupat toată lățimea ecranului, și a luat lor legitime 900 pixeli. Ca rezultat, marginile câmpului rămân aproximativ 154 pixeli ((1280-900) / 2). Cineva ar putea spune că w bine. La urma urmei, atunci când am deschis un site pe PC, cu lățimea ecranului, de exemplu, aceleași 1280 de pixeli, este firesc la site-ul nu va prelua întreaga lățime, și va ocupa poziția pe 900 de pixeli, care sunt definite în CSS ca lățimea maximă site-ului (sau cu lățime fixă ​​în cazul în care un aspect fix).

Dar, pe o tabletă, atunci această situație nu pare normală. pentru că Ecranul în sine este încă mică în comparație cu desktop-uri, deși el avea permisiune sau 1280 de puncte. Aș dori să văd site-ul are un maxim de spațiu pe ecran. Pe computerul nu avem nevoie, pentru că 900 pixeli pe ecran va arata, dimensiunea pixel bun normal mai mult decât tableta. Dar, pe tableta atunci când pagina nu ocupă întregul ecran - se pare sălbăticia (cel puțin pentru mine). Și lucrul este viewport meta-tag-ul. am opta pentru a afișa site-ul în timp real. Acest lucru ne-a ajutat atunci când dimensiunea site-ul a fost mai mic de 900 de puncte, și anume, Ea ne-a ajutat să nu o scară pentru a se potrivi ecranului și afișat în dimensiune reală. Dar ne ține la dimensiunea ecranului mai mult de 900 de puncte, pentru că nu doresc doar pentru a mări la locul de muncă, la site-ul a crescut pentru a se potrivi fereastră, și anume să utilizeze la maximum întreaga lățime a ecranului, este bine după toate dispozitivul mobil.

Trebuie să compare pentru a încărca versiunea veche a site-ului (designul complet la fel, cu excepția faptului că nu este lățimea adaptabilă și fixă ​​de 900 de pixeli) și este în sarcina inițială pe întreaga lățime a ecranului. La urma urmei, în ea nu am folosit portul de vizualizare.

În concluzie, aș spune că până în prezent testată doar pe Samsung. Ti-e frica sa-si asume ce se va întâmpla pe iPad, care este rezoluția pe partea largă de două ori Samsung 2048px. Este pagina va dura până mai puțin de jumătate din ecran (este acolo 900 de puncte)?

Pe scurt, aș dori să întreb comunitatea să vină peste oricine cu probleme similare. Și dacă aceasta poate fi considerată o problemă? Sau este un comportament normal, care nu are nevoie pentru a corecta? Ie Acesta afișează site-ul în timp real. Dacă nu umple ecranul, fără problemele clientului va crește degetele sale deja smasshtabiruet greșit?

Am încercat să găsească o cale de a face astfel încât atunci când dimensiunea ecranului este mai mică de 900 de pixeli, portul de vizualizare ar lucra, și la o rată mai mare de 900 de pixeli nu se va declanșa. Nu am găsit.

P.S. Îmi pare rău că nu este plasat în acest qa text, am ratat de data asta, și acum nu pot schimba.

Dacă am înțeles corect, atunci aveți conținutul, lățimea minimă a 320px și un maxim - la 900px. Și trebuie să:
1. Dacă dimensiunea ecranului dispozitivului este mai mică decât 900px, apoi setați paginile Viewport lățime ca ecran al unui dispozitiv (care a fost reconstruit CSS marcare sub această lățime).
2. În cazul în care dimensiunea ecranului dispozitivului este mai mare sau egal cu 900px, apoi setați lățimea paginii în imaginea curentă 900px (900px prin aceea că pe dimensiunea ecranelor și mai mult conținut este crescut din cauza la scară).

Vă mulțumim pentru decizia ta! Nu am încercat, dar voi încerca în curând!

Nu este de lucru pentru mine. document.write dintre care nici unul nu se poate face o meta tag. alte înregistrări verificate scrieri.

Numele dispozitivului pe care codul de verificare, versiunea sistemului de operare, browser-ul și browser-ul versiune.

1. Verificați dreptul de aspect, sub rezerva interogările media, scara de fonturi, etc. imediat în browser Ce test vorstku mobil?
2. Scrieți interogări media în ordinea corectă cu valorile corecte, condițiile potrivite.