interogări media sunt un instrument excelent pentru manipularea aspectul unui site web, în funcție de parametri, cum ar fi lățimea părții vizibile a ferestrei browser-ului (viewport), dar uneori rezultatul aplicării acestora poate varia în funcție de browser-ul, care este enervant. Un bun exemplu poate fi cazul când nu se cunoaște dacă bara de derulare verticală este luată în considerare, dacă este cazul, în procesul de calcul al ferestrei de vizualizare.
Regulile aplicate în proprietatea mass-media indică lățimea ecranului dispozitivului de ieșire țintă lățime disponibile. În ceea ce privește afișarea dispozitivelor cu mediu continuu, lățimea ferestrei de vizualizare (în conceptul așa cum este descris la punctul 9.1.1 specificația CSS2 [CSS21]). inclusiv dimensiunea barei de defilare prezentate (dacă este cazul).
Aceasta este, caietul de sarcini definește destul de clar ceea ce ar trebui să facem în acest caz browsere. Dar, în practică, situația nu este atât de clar. Rezultatul nu depinde numai de browserul și sistemul de operare, dar, de asemenea, de setările utilizatorului. Pentru a urmări comportamentul browsere populare în acest moment, am creat un simplu document de testare valori lățime de proprietate în cadrul structurilor de interogări media, care oferă o anumită cantitate de valori tranzitorii (și) Valorile critice testate într-o varietate de browsere.
Ca rezultat, am văzut trei modele majore în comportamentul lor:
Dimensiunea barei de defilare este activată solicitarea media largă.
Multe browsere desktop iau în considerare dimensiunea bara de derulare în determinarea lățimii imaginii curente. Acest Firefox. Opera și Internet Explorer.
Dimensiunea barei de defilare nu este inclus în lățimea interogării mass-media.
După cum sa menționat în articolul meu anterior, la care m-am referit la începutul, versiunile desktop Lent ale motorului WebKit browser-ului. cum ar fi Chrome. Safari, iar altele nu ia în considerare la determinarea valorii cererii de mass-media la lățimea scrollbar structurii menționat. Un pic mai dificil, cu excepția cazului, desigur, nu ia în considerare următorul caz.
Bara de defilare face parte din lățimea unei cereri mass-media, dar nu afectează lățimea zonei de conținut.
În Mac OS X 10.7 și setări disponibile mai mare pe fila General din meniul System Configuration, care permit să se stabilească scrollbars numai în cazul în care utilizatorul derulează fereastra. Și în cazul în care utilizatorul a activat această funcție, browser-ul include o dimensiune de interogare scrollbar mass-media largi, dar afișează numai atunci când fereastra browser-ului este defilat. În plus, bara de derulare este afișat în partea de sus. și nu ar trebui să fie partea din zona de conținut. Din acest motiv, în acest caz, lățimea zonei de conținut, situată în portul de vizualizare, dimensiunea bara de derulare mai mare decât în alte browsere.
În mod similar, actul și testat browserele mele mobile (diferite dispozitive iOS și versiunea, Android 2.3.3 Opera Mobile. Și 4.1.2).
Se pune întrebarea. Fie că un astfel de comportament este contrar browserele interogări media caietul de sarcini. Este dificil de a da un răspuns clar. La urma urmei, în cele din urmă, bara de derulare este inclusă în valoarea lățimii, dar în această chestiune mă interesează dacă un astfel de comportament este într-adevăr văzut grupul de lucru CSS consorțiului pentru a crea caietul de sarcini.
În cele mai multe cazuri, aceasta nu este o problemă, dar poate deveni.
Cum este această practică pentru tine, ca un dezvoltator web? Ca un exemplu, să ne uităm la modul în care manipulate impecabil de design adaptiv în cele mai recente versiuni ale Firefox. Acestea includ bara de derulare verticală în lățimea viewport și o dată conținutul paginii nu se încadrează în fereastra browser-ului vertical și afișa în mod continuu, și nu numai atunci când defilare conținutul său. Acest lucru înseamnă că, dacă utilizați aceste browsere pentru a valida maparea design-ul la dimensiunea viewport dispozitivelor mobile obișnuite, nu obține rezultate obiective, care vor reflecta exact prezent comportamentul site-ului atunci când tranziția punctelor caracteristică dimensiunea imaginii curente a unui dispozitiv reale, simulator sau emulator acestuia.
Același comportament este tipic versiunea desktop a browser Safari și Chrome (cu excepția cazului când acestea sunt instalate pe un Mac cu OS X 10.7 sau mai mare și de configurare a sistemului prevăzut un display scrollbar numai atunci când parcurge conținutul ferestrei).
În cele mai multe cazuri, aceste diferențe în afișaj nu reprezintă un obstacol serios pentru dezvoltatorii web și poate fi, uneori, pur și simplu invizibile, cu condiția ca designul site-ul dvs. răspunde instantaneu la schimbările de dimensiunea ferestrei browser-ului. Dar dacă proiectul prevede punct de tranziție fix (breakpoints) la locul de aspect diferite opțiuni adaptate la un anumit port de vizualizare lățime și / sau conținutul său este adevărat, caracteristic largă, ceea ce necesită determinarea precisă a punctelor de tranziție, atunci ar trebui să ia în considerare diferenţele menționate mai sus. În opinia mea, există mai multe modalități de a simplifica sarcina:
- Într-un fel (de exemplu, recunoașterea browser-ul utilizatorului cu ajutorul unor scripturi sau alte metode alternative) pentru a determina dacă browser-ul include scrollbar cereri media largi.
- Determinarea poziției tranziției punctelor adaugă la lățimea lor valoare a barei de defilare pe verticală, care va împiedica bara de derulare orizontală în browsere, care includ scrollbar dimensiunea viewport în lățime și afișat în mod constant (indiferent dacă utilizatorul sulurile o fereastră de browser sau nu).
- Creați un șablon de site-ul cât mai flexibil posibil, ceea ce implică o schimbare lină a lățimii zonei de conținut, astfel încât diferențele de afișare din bara de derulare nu va conta (cel puțin critică).
Eu, desigur, eu prefer a treia poziție. Cu toate acestea, am avut de a face cu un astfel de design care de fapt nu poate oferi suficientă flexibilitate, în timp ce mai adecvată va fi a doua opțiune. În ceea ce privește primul punct, am exclude, cel puțin până când găsiți o metodă mai sigură decât cea de modă veche, adesea însoțită de greșeli, recunosc browserul utilizatorului.
Și ce ar putea fi o alternativă mai bună? De exemplu, includerea în structura cererii mass-media fragmentelor, verifică poziția bara de derulare. Acesta este modul în care:
@media ecran numai și (max-lățime: 768px) și (vertical-scrollbar: [interior | exterior | on-top]) / * Conversii necesare * /
>
Dar chiar și în acest caz, pentru a putea beneficia de acest design, tot trebuie să cunoască lățimea barei de defilare (care poate fi diferită și depinde de sistemul de operare), atunci când acesta nu este afișat în partea de sus a zonei de conținut și partea ei . Deci, eu nu sunt sigur de acest proces va fi o mulțime de confuzie.