Адрасаванне адраснай радкі iOS у макетах 100Вт

Гэта не памылка, гэта асаблівасць.

Калі я рэалізаваў першае пераўтварэнне PSD з прыгожым вобразам героя на 100 Вт і 100 Вт, я з жахам выявіў, што дно маёй планіроўкі было схавана пры праглядзе на маім iPhone 6s iOS 10 Safari. Чаму? Я думаў, што ўсё зрабіў правільна! Я выпадкова дадаў мяжу альбо пракладку дзе-небудзь? Што я не заўважыў?

Пры ўважлівым аглядзе мне хутка стала ясна, што малюнак майго героя быў высокі на 100%, але быў часткова схаваны адрасам і панэллю інструментаў Safari, які стварыў жахлівы «ролік ваганняў». Гэта нармальна, я думаў. З дапамогай хуткага пошуку ў Google і Stack Overflow нічога нельга выправіць. Аднак я даведаўся, што рашэнне не так проста.

Правёўшы некаторыя даследаванні, я выявіў, што гэта даволі распаўсюджаная скарга пад назвай "памылка пракруткі ў праглядзе iOS". У лютым 2015 года Нікаля Хозі паведаміў пра памылку ў вэб-камплекце Bugzilla, калі выявіў, што панэль з кнопкамі браўзэра адрэзала дно яго 100-гадзіннай мабільнай гульні. Бенджамін Пулен, інжынер Apple, адказаў на Hoizy. Ён патлумачыў, што гэта не памылка, а функцыя.

Гэта цалкам намер. Мы прыклалі шмат намаганняў для дасягнення гэтага эфекту. :) Асноўная праблема ў тым, што бачная вобласць дынамічна мяняецца пры пракручванні. Калі мы адпаведна абнавім вышыню прагляду CSS, нам трэба абнавіць макет падчас пракруткі. Мала таго, што гэта выглядае як дзярмо, практычна немагчыма зрабіць гэта на 60 FPS (60 FPS - базавая частата кадраў у iOS). Цяжка паказаць вам частку "падобна на дзярмо", але ўявіце, як вы пракручваеце, змест рухаецца і тое, што вы хочаце бачыць на экране, пастаянна мяняецца. Дынамічнае абнаўленне вышыні не спрацавала. У нас было некалькі варыянтаў: выдаліць блокі прагляду на iOS, змяніць памер дакумента, як і iOS 8, выкарыстоўваць невялікі памер прагляду, выкарыстоўваць вялікі памер прагляду. З дадзеных, якія мы атрымалі, выкарыстанне шырокага выгляду было лепшым кампрамісам. У большасці выпадкаў большасць сайтаў з адзінкамі прагляду выглядалі выдатна.

Са свайго боку я не інжынер Apple, таму я веру яму, калі ён кажа, што ёсць важкія прычыны, чаму яны развівалі такія паводзіны. Такім чынам, памылка была адзначана "УРЭШЫ WONTFIX", і я зразумеў, што калі б мне хацелася мець свой прыгожы, 100% вобраз героя, мне трэба было б пагрузіцца глыбей.

Рашэнне 1. CSS-медыя-запыты

Хоць гэты спосаб не зусім элегантны, ён просты і просты ў выкананні. Просты доступ да ўсіх прылад iOS з пэўнай шырынёй і вышынёй прылад. Вось код ветлівасці pburtchaell, у якім ".foo" - клас для вашага элемента ў поўны рост.

@media all і (шырыня прылады: 768px) і (вышыня прылады: 1024px) і (арыентацыя: партрэт) {.foo {рост: 1024px; }} / * iPad з альбомным фарматам. * / @media all і (шырыня прылады: 768px) і (вышыня прылады: 1024px) і (арыентацыя: пейзаж) {.foo {рост: 768px; }} / * iPhone 5 Вы таксама можаце нацэльваць прылады з прапорцыямі. * / @ экран і @ (прапорцыя прылады: 40/71) {.foo {рост: 500px; }}

Гледзячы на ​​код вышэй, невялікае перакрыцце зместу здаецца непазбежным. Аднак элементы з пазіцыянаваннем і памерам, якія залежаць ад блокаў прагляду, застаюцца пастаяннымі. Гэта выйгрыш! Калі дадаць просты разлік (100vh - heightOfBar), гэта кампенсуе адрасны радок. З такой колькасцю падтрымліваемых прылад і браўзэраў гэта не выглядае ўстойлівым рашэннем.

Рашэнне 2: Выраўноўванне да InternalHeight з Javascript.

Унутраныя памеры залежаць ад вышыні / шырыні аконнага выгляду з улікам вертыкальных / гарызантальных палос пракруткі. Зараз пагаворым! Вось схема таго, што ўключае.

З гэтымі ведамі вы можаце выкарыстоўваць такі просты сцэнар, як гэты, каб усталяваць вышыню загрузкі старонкі і падтрымліваць яе сталай да змены памеру, ад карыстальнікаў пакетнага перапаўнення да biq:

window.onresize = function () {document.body.height = window.innerHeight; }
window.onresize (); // называецца, каб усталяваць вышыню спачатку.

Рашэнне 3: кампанент рэакцыі Div100vh

Паколькі мы ўсе любім React, я хацеў знайсці рашэнне для React Components. Я знайшоў пакет у ліцэі ад Міхаіла Васіна, каб выправіць гэтую праблему. Як усталяваць:

npm install --запасці рэакцыю-дзіў-100vh

Затым імпартуйце кампанент і загарніце ў яго элементы наступным чынам:

імпарт Div100vh ад 'react-div-100vh';
const MyFullscreenComponent = () => ( Вашы рэчы ідуць сюды )

І пойдзем!

Правёўшы выпрабаванне гэтых розных рашэнняў, я разумею, што для гэтай праблемы няма рашэння "адзін па памеры". Таму будзьце асцярожныя з крос-браўзэрам і тэстамі на мноства прылад. І, магчыма, вам варта пазбягаць выкарыстання vh / vw прылад для мабільных прылад наогул, паколькі няправільнае паводзіны з гэтымі прыладамі добра зафіксавана ў мабільных браўзэрах.

Дайце мне ведаць, калі гэтыя рашэнні былі карыснымі для вас і якія з іх працуюць лепш за ўсё!