100vh düzlükdə iOS ünvan çubuğuna müraciət

Bu səhv deyil, bir xüsusiyyətdir.

İlk PSD dönüşümümü gözəl 100vh və 100vw qəhrəman obrazı ilə həyata keçirdiyim zaman, mənim iPhone 6s iOS 10 Safari-də göründüyü zaman planımın alt hissəsinin gizləndiyini tapmaqdan dəhşətə gəldim. Niyə? Hər şeyi düzgün etdiyimi düşündüm! Təsadüfən bir haşiyə əlavə etdim və ya hər hansı bir yerə padding etdim Mən nəyi gözdən salmışam?

Yaxın yoxlanışdan sonra tez bir zamanda mənə məlum oldu ki, mənim qəhrəman obrazım 100% hündürdür, lakin qismən Safari'nin ünvanı və alətlər çubuğu tərəfindən gizlədilib, bu qorxulu "yırğalanan rulon" yaratdı. Düzü, düşündüm. Google-da sürətli bir axtarış və Stack Overflow ilə heç bir şey düzəldilə bilməz. Ancaq öyrəndim ki, həll etmək o qədər də asan deyil.

Bəzi araşdırma apardıqdan sonra, "iOS görünüş portundakı sürüşmə səhv" adlanan olduqca yaygın bir şikayət olduğunu gördüm. 2015-ci ilin fevral ayında, Nicolas Hoizy, Bugzilla veb dəstindəki səhv haqqında məlumat verərkən, brauzer düymələri olan çubuğunun, 100 Vh mobil oyununun altını kəsdiyini tapdı. Apple şirkətinin mühəndisi Benjamin Poulain Hoizyə cavab verdi. Bunun səhv deyil, bir funksiya olduğunu izah etdi.

Bu tamamilə niyyətdir. Bu təsiri əldə etmək üçün çox səy sərf etdik. :) Əsas problem, sürüşərkən görünən sahənin dinamik şəkildə dəyişməsidir. CSS görüntüsünün hündürlüyünü müvafiq olaraq yeniləyiriksə, tərtib edərkən düzeni yeniləməliyik. Yalnız bədbin görünmür, əksər saytlarda bunu 60 FPS-də etmək praktik olaraq mümkünsüzdür (60 FPS iOS-da əsas çərçivədir). Sizə "bokday görünür" hissəsini göstərmək çətindir, ancaq düşünün ki, sürüşərkən məzmun hərəkət edir və ekranda görmək istədiyiniz daim dəyişir. Boyun dinamik yeniləməsi nəticə vermədi. Bir neçə seçimimiz var: iOS-da görüntü vahidlərini silmək, sənədin ölçüsünü iOS 8-də olduğu kimi ölçüsünə dəyişmək, kiçik görüntü ölçüsünü istifadə etmək, geniş görünüş ölçüsündən istifadə etmək. Əldə etdiyimiz məlumatlardan daha böyük mənzərədən istifadə ən yaxşı güzəşt idi. Görmə yeri vahidləri olan əksər veb saytlar çox vaxt böyük görünürdü.

Mən Apple şirkətində mühəndis deyiləm, ona görə bu davranışın inkişaf etdirilməsinin yaxşı səbəblərinin olduğunu söylədiyi zaman ona inanıram. Beləliklə, səhv "HƏYATAN WONTFIX" qeyd edildi və başa düşdüm ki, heç vaxt gözəl, 100% qəhrəman obrazım olmasını istəsəm, daha da dərinliyə dalmaq məcburiyyətindəyəm.

Həll 1: CSS media sorğuları

Bu üsul olduqca zərif olmasa da, sadədir və həyata keçirmək asandır. Sadəcə müəyyən bir cihaz eni və boyu ilə bütün iOS cihazlarına daxil olun. Budur ".foo" tam boylu əşyanız üçün bir sinif olan pburtchaell'in kod nəzarəti.

@media hamısı və (cihazın eni: 768px) və (cihazın hündürlüyü: 1024px) və (oriyentasiya: portret) {.foo {boyu: 1024px; }} / * Landşaft formatlı iPad. * / @media hamısı və (cihazın eni: 768px) və (cihazın hündürlüyü: 1024px) və (oriyentasiya: mənzərə) {.foo {boy: 768px; }} / * iPhone 5 Ayrıca aspekt nisbəti olan cihazları hədəfə ala bilərsiniz. * / @media ekranı və (cihazın nisbəti: 40/71) {.foo {hündürlüyü: 500px; }}

Yuxarıdakı koda baxdıqda məzmunun bir az üst-üstə düşməsi qaçılmaz görünür. Bununla birlikdə, yerləşdirmə ölçüsü və görüntü vahidlərindən asılı olan elementlər sabit qalır. Bu qələbə! Sadə bir hesablama (100vh - hündürlükOfBar) əlavə etmək, ünvan çubuğunu kompensasiya edər. Çox sayda cihaz və brauzer dəstəyi ilə bu davamlı bir həll kimi görünmür.

Həll 2: Javascript ilə daxiliHeight-a uyğunlaşdırma.

Daxili ölçülər şaquli / üfüqi sürüşmə çubuklarını nəzərə alaraq, görünüş pəncərəsinin hündürlüyü / eninə aiddir. İndi danışaq! Burada nə daxil olduğu bir diaqram var.

Bu biliklə, səhifənin yüklənmə hündürlüyünü təyin etmək və ölçüsünə qədər sabit saxlamaq üçün toplu daşma istifadəçilərindən biqə qədər sadə bir skriptdən istifadə edə bilərsiniz:

windows.onresize = funksiya () {sənəd.body.height = windows.innerHeight; }
windows.onresize (); // əvvəlcə hündürlüyü təyin etmək üçün çağırılır.

Həll 3: Div100vh reaksiya komponenti

Hamımız Reaktı sevdiyimiz üçün Reaktiv komponentlər üçün bir həll tapmaq istədim. Bu problemi həll etmək üçün Mixail Vasindən bir npm paket tapdım. Quraşdırma qaydası:

npm quraşdırma - reaksiya ver-div-100vh

Sonra komponenti idxal edin və elementlərinizi aşağıdakı kimi sarın:

Div100vh 'reaksiya-div-100vh' dən idxal edin;
const MyFullscreenComponent = () => ( İşləriniz bura gedir )

Və gedək!

Bu fərqli həlləri sınaqdan keçirdikdən sonra başa düşürəm ki, bu problemin yeganə ölçüsü uyğun deyil. Buna görə çarpaz brauzerinizdə və çarpaz cihaz testlərinizdə diqqətli olun. Və bəlkə də vh / vw cihazlarını ümumilikdə mobil qurğular üçün istifadə etməkdən çəkinməlisiniz, çünki bu cihazlarda səhv davranış mobil brauzerlərdə yaxşı sənədləşdirilmişdir.

Bu həllərin sizin üçün faydalı olub olmadığını və hansının daha yaxşı işlədiyini mənə bildirin!