Szélesség médialekérdezéseket és függőleges görgetősáv
Médialekérdezéseket egy nagyszerű eszköz manipulálni az elrendezés a weboldal, attól függően, paraméterek, mint a szélessége a látható része a böngésző ablak (ablakon), de néha az eredmény alkalmazásuk befolyásolhatják a böngésző, ami bosszantó. Jó példa lehet a helyzet, ha nem ismert, hogy a függőleges görgetősáv is figyelembe vesszük, ha van ilyen, az eredmény kiszámításához a nézetablakban.
Az alkalmazott szabályok a média szélessége tulajdonság jelzi szélessége álló kimeneti eszköz képernyőjén. Ami a megjelenítő eszközök folyamatos közegben, a szélessége a nézetablak (a fogalom bekezdésben leírtak szerint 9.1.1 CSS2 specifikáció [CSS21]). beleértve a méret a görgetősáv bemutatott (ha van ilyen).
Vagyis a specifikáció határozza meg egyértelműen, hogy mit kell tennünk ebben az esetben a böngészők. A gyakorlatban azonban a helyzet nem ilyen egyértelmű. Az eredmény nem csak attól függ a böngésző és az operációs rendszer, hanem a felhasználó beállításait. Annak érdekében, hogy kövesse a viselkedését népszerű böngészők abban a pillanatban, hoztam létre egy egyszerű teszt dokumentum szélességét ingatlan értékének a struktúrák médialekérdezések, amely bizonyos mennyiségű átmeneti értékek (töréspontok), és teszteltük a különböző böngészők.
Ennek eredményeként, láttam három nagy minták viselkedését:
A méret a görgetősáv aktiválódik médiát kérelmet.
Számos asztali böngészők veszi figyelembe a méret a gördítősávban szélességének meghatározásakor az ablakon. Ez a Firefoxot. Opera és az Internet Explorer.
A méret a görgetősáv nem szerepel a szélessége a média lekérdezés.
Amint az előző cikkemben, amelyekre utaltam a nagyböjt kezdete, az asztali változat a böngésző motor WebKit. mint például a Chrome-ot. Safari és mások nem veszik figyelembe, ha értékének meghatározásakor görgetősáv média kérelmet a szélessége említett szerkezet. Egy kicsit nehezebb, kivéve persze, nem veszi figyelembe a következő eset.
A görgetősáv része a szélessége a média kérelmet, de nem befolyásolja a szélessége a tartalom területén.
A Mac OS X 10.7 vagy újabb elérhető beállítások az Általános lapon a System Configuration menü, amely lehetővé teszi, hogy állítsa be a gördítősáv csak akkor, ha a felhasználó görgeti az ablakot. És ha a felhasználó engedélyezte ezt a funkciót, a böngésző tartalmaz egy görgetősáv mérete médiát keresett, de csak akkor jelenít meg a böngésző ablak görgethető. Ezen túlmenően, a görgetősáv jelenik meg a tetején. és nem mint amilyennek lennie kellene oldalán tartalom területén. Emiatt ebben az esetben a szélessége a tartalom területen belül található az ablakon, a méret a görgetősáv szélesebb, mint a többi böngésző.
Hasonlóképpen, a törvény és a vizsgált én mobil böngészők (a különböző iOS eszköz és verzióját, az Opera Mobile. Android 2.3.3 és 4.1.2).
Felmerül a kérdés. Függetlenül attól, hogy az ilyen viselkedés ellentétes böngészők médialekérdezéseket leírás. Nehéz határozott választ adni. Végtére is, a végén, a görgetősáv tartalmazza az érték a szélessége, de ebben a kérdésben Érdekel, hogy az ilyen magatartás valóban látható CSS munkacsoport a konzorcium létrehozására előírásoknak.
A legtöbb esetben ez nem jelent problémát, de ez válhat.
Hogy ez a gyakorlatban az Ön számára, mint a web developer? Példaként nézzük meg, hogyan kezeli hibátlanul adaptív tervezése a legújabb változat a Firefox. Ezek közé tartozik a függőleges görgetősávot a nézetablakban szélesség és ha az oldal tartalma nem fér bele a böngésző ablakot függőlegesen, és jelenítse meg folyamatosan, és nem csak akkor, ha a görgetés annak tartalmát. Ez azt jelenti, hogy ha ezeket a böngészőket használja, hogy érvényesítse a feltérképezése a design, hogy a nézetablak mérete tipikus mobileszközökön, akkor nem kap objektív eredményeket, melyek hűen tükrözik a jelenlegi viselkedését a helyszínen, amikor az átmenet pontját jellemző méret a nézetablak egy valódi eszköz, a szimulátor, vagy emulátor.
Ugyanez a viselkedés jellemző a desktop változata Safari és Chrome böngészők (kivéve, ha fel vannak szerelve, a Mac OS X 10.7 vagy újabb és a rendszer konfigurációs biztosított kijelző scrollbars csak lapozunk a tartalmát az ablak).
A legtöbb esetben ezek a különbségek a kijelzőn nem komoly akadályt webfejlesztők és néha egyszerűen láthatatlan, feltéve, hogy a tervezés az Ön honlapján azonnal reagál a változások böngésző ablak méretét. De ha a kialakítás fix átmeneti helyen (töréspont) a különböző lehetőségek a webhely elrendezését, alkalmazkodik az adott szélessége az ablakon, és / vagy annak tartalma igaz, az ő jellegzetes széles, amihez pontos meghatározása átmeneti pontot, akkor figyelembe kell vennie a különbségek a fent említett. Véleményem számos módon, hogy egyszerűsítse a feladat:
- Valahogy (például a felhasználó böngészőjének elismerését segítségével script vagy más alternatív módszerek) annak meghatározására, hogy a böngésző tartalmaz görgetősávon széles média kéréseket.
- Helyzetének meghatározására az átmeneti pontot hozzá értékük szélessége a függőleges görgetősáv, amely megakadályozza, hogy a vízszintes görgetősáv a böngészőkben, amelyek magukban foglalják a görgetősáv nézetablak mérete széles és állandóan jelennek meg (függetlenül attól, hogy a felhasználó a egy böngésző ablakot vagy sem).
- Készíts egy honlap sablon a lehető legrugalmasabb, ami magában foglalja a sima változás a szélessége a tartalom terület, így a különbség a kijelző görgető nem számít (legalábbis kritikus).
Én, természetesen, én inkább a harmadik pozícióba. Én azonban meg kellett küzdenie egy ilyen terv, amely ténylegesen nem nyújt megfelelő rugalmasságot, míg a megfelelő lesz a második lehetőséget. Ami az első pontot, azt zárja ki, legalábbis addig, amíg meg nem találja a megbízhatóbb módszer, mint a régi vágású, gyakran kíséri hibák, felismeri a felhasználó böngészőjének.
És mi lehet jobb alternatíva? Például a felvétel a szerkezet a fragmentum média kérésére ellenőrzi a helyzet a görgetősáv. Így:
@media csak képernyő és (max-szélesség: 768px) és (függőleges-görgetősáv: [belülről | kívül | on-top]) / * szükséges konverziók * /
>
De még ebben az esetben annak érdekében, hogy részesüljenek a design, akkor is kell tudni, hogy a szélessége a görgetősáv (amely különböző lehet és függ az operációs rendszer), amikor nem jelenik meg a tetején a tartalmi terület és az oldalán a neki . Tehát nem vagyok biztos ez a folyamat lesz sok zavart.