IOS мекенжай жолағына 100в.сағ

Бұл қате емес, бұл ерекшелік.

Мен бірінші PSD түрлендіруді әдемі 100вв және 100вв кейіпкер бейнесімен жүзеге асырған кезде, менің iPhone 6s iOS 10 Safari-де қараған кезде орналасуымның төменгі жағы жасырылғанын білуге ​​қорқып кеттім. Неге? Мен бәрін дұрыс жасадым деп ойладым! Мен кездейсоқ шекара қосып қойдым ба немесе толтырып жібердім бе? Мен нені елемедім?

Тексеру кезінде менің кейіпкерімнің бейнесі 100% биік екендігі тез түсінілді, бірақ Сафаридің мекен-жайы мен құралдар тақтасы ішінара жасырылды, ол қорқынышты «орамалды» құрады. «Жақсы» деп ойладым. Google және Stack Overflow-да жылдам іздеудің арқасында ешнәрсе түзетілмейді. Алайда, шешім оңай емес екенін білдім.

Біраз зерттеулер жүргізгеннен кейін, бұл «iOS қарау аймағындағы айналдыру қатесі» деп аталатын өте кең таралған шағым екенін білдім. 2015 жылдың ақпан айында Николас Хоизи Bugzilla веб-жиынындағы қате туралы хабарлады, ол шолғыш түймелері бар жолақ өзінің 100 Vh мобильді ойынының түбін кесіп тастағанын тапты. Бенджамин Пулейн, Apple компаниясының инженері Хоизиға жауап берді. Ол қате емес, функция екенін түсіндірді.

Бұл толығымен ниет. Бұл нәтижеге жету үшін көп күш жұмсадық. :) Негізгі проблема - айналдыру кезінде көрінетін аймақ қарқынды өзгереді. Егер CSS қарау терезесінің биіктігін сәйкесінше жаңартатын болсақ, жылжыту кезінде орналасуды жаңартуымыз керек. Бұл жай ғана көрінбейді, оны көптеген сайттарда 60 FPS-те жасау іс жүзінде мүмкін емес (60 FPS - бұл iOS-тағы кадрлардың негізгі жылдамдығы). Сізге «ашуланғанға ұқсайтын» бөлікті көрсету қиын, бірақ сіз айналдырған кезде мазмұн өзгереді және экранда көргіңіз келетін нәрсе үнемі өзгеріп отыратынын елестетіп көріңіз. Биіктікті динамикалық жаңарту нәтиже бермеді. Бізде бірнеше нұсқалар болды: IOS-тегі көру терезесінің бірлігін жою, құжат көлемін iOS 8-ге дейін өзгерту, көріністің кішкентай өлшемін пайдалану, үлкен көріністі пайдалану. Біздегі мәліметтерден үлкен көріністі пайдалану ең жақсы ымыраға келу болды. Көру порты бар веб-сайттардың көпшілігі көбіне керемет көрінді.

Мен Apple корпорациясының инженері емеспін, сондықтан мен оның мұндай мінез-құлқының дамуына себептері бар деп айтқан кезде мен оған сенемін. Сондықтан қате «ШЕШІМІЗ ЖАЗЫЛҒАН» деп белгіленді және мен егер менің әдемі, 100% кейіпкер образыма ие болғым келсе, тереңірек сүңгуім керек екенін түсіндім.

Шешім 1: CSS медиа-сұраулары

Бұл әдіс әдемі болмаса да, қарапайым және оңай. Барлық iOS құрылғыларына белгілі бір ені мен биіктігі арқылы қол жеткізіңіз. Мұнда «.foo» сіздің толыққанды заттарыңызға арналған класс болып табылатын pburtchaell-дің кодтық ілтипаты.

@media all және (құрылғының ені: 768px) және (құрылғының биіктігі: 1024px) және (бағдар: портрет) {.foo {бойы: 1024px; }} / * ландшафт форматындағы iPad. * / @media all және (құрылғының ені: 768px) және (құрылғының биіктігі: 1024px) and (бағдар: пейзаж) {.foo {height: 768px; }} / * iPhone 5 Сондай-ақ, сіз пропорциялары бар құрылғыларды қолдана аласыз. * / @media экраны және (құрылғының арақатынасы: 40/71) {.foo {биіктігі: 500px; }}

Жоғарыдағы кодқа қарап, мазмұнның шамалы қабаттасуы сөзсіз көрінеді. Алайда, орналасу өлшемі және көрініс бөлігіне тәуелді элементтер тұрақты болып қалады. Бұл жеңіс! Қарапайым есептеуді (100в / с - биіктігіOfBar) қосу мекен-жай жолағын толтырады. Көптеген құрылғылар мен браузерлер қолдау көрсететін болса, бұл тұрақты шешім болып көрінбейді.

2 шешім: Javascript-пен ішкіHeight-ке туралау.

Ішкі өлшемдер тік / көлденең жылжыту жолақтарын ескере отырып, қарау терезесінің биіктігіне / еніне қатысты. Енді сөйлесейік! Міне, оның құрамына кіретін диаграмма.

Осы біліммен сіз парақты толтыру көлемін өзгертіп, өлшемін өзгерткенше тұрақты етіп ұстап тұру үшін қарапайым сценарийді қолдана аласыз: пайдаланушылардың толып кетуінен biq-ке дейін:

windows.onresize = функциясы () {document.body.height = windows.innerHeight; }
windows.onresize (); // алдымен биіктікті тағайындау үшін шақырылады.

3 шешім: Div100vh реакциясының компоненті

Барлығымыз React-ты жақсы көретіндіктен, мен React Component-тің шешімін тапқым келді. Мен бұл мәселені шешу үшін Михаил Васиннен npm пакетін таптым. Орнату әдісі:

н.м. орнату - реактивті-div-100vh

Содан кейін компонентті импорттаңыз және элементтеріңізді келесідей ораңыз:

Div100vh 'реакция-div-100vh' -тен импорттаңыз;
const MyFullscreenComponent = () => ( Сіздің заттарыңыз осында кетеді )

Ал кеттік!

Осы әртүрлі шешімдерді сынап көргеннен кейін, мен бұл мәселеге бір өлшемге сәйкес келетін шешім жоқ екенін түсіндім. Сондықтан, кросс-шолғышта және құрылғылардың сынақтарында абай болыңыз. Мүмкін сіз vh / vw құрылғыларын мобильді құрылғыларға мүлдем қолданудан аулақ болуыңыз керек, өйткені бұл құрылғылардың дұрыс емес әрекеті мобильді браузерлерде жақсы жазылған.

Бұл шешімдер сізге пайдалы болғанын және қайсысы жақсы жұмыс жасайтынын біліңіз!