Direcció de la barra d'adreces de iOS en dissenys de 100 CV

No és un error, és una característica.

Quan vaig implementar la meva primera conversió PSD amb la bonica imatge d’heroi de 100vh i 100vw, em vaig horroritzar quan vaig veure que el fons de la maquetació estava oculta quan es veia al meu iPhone 6s iOS 10 Safari. Per què? Vaig pensar que ho feia tot bé! He afegit accidentalment una vora o un farciment en qualsevol lloc? Què he passat per alt?

Amb una inspecció més acurada, es va fer ràpidament clar que la meva imatge d’heroi era al 100% d’alçada, però estava ocultada parcialment per l’adreça i la barra d’eines de Safari, que van crear el temut “rotllo rodat”. Va bé, vaig pensar. Amb una ràpida cerca a Google i desbordament de pila, no es pot arreglar res. Tot i això, vaig saber que la solució no és tan fàcil.

Després de fer algunes investigacions, vaig trobar que es tractava d’una queixa bastant comuna anomenada "error de desplaçament a la finestra de la iOS". Al febrer de 2015, Nicolas Hoizy va informar de l’error del kit web de Bugzilla quan va comprovar que la barra amb els botons del navegador tallava el fons del seu joc mòbil de 100 Vh. Benjamin Poulain, enginyer a Apple, va respondre a Hoizy. Va explicar que no va ser un error, sinó una funció.

Aquesta és tota la intenció. Hem fet molts esforços per aconseguir aquest efecte. :) El problema bàsic és que l’àrea visible canvia dinàmicament quan es desplaça. Si actualitzem l'alçada de la visualització CSS ​​en conseqüència, hem de actualitzar el disseny mentre es desplaça. No només sembla una merda, és pràcticament impossible a la majoria de llocs de fer-ho a 60 FPS (60 FPS és la taxa de fotogrames bàsica a iOS). És difícil mostrar-vos la part "semblant a la merda", però imagineu-vos, mentre us desplaçeu, el contingut es mou i el que voleu veure a la pantalla canvia constantment. L'actualització dinàmica de l'alçada no va funcionar. Teníem diverses opcions: suprimir unitats de visualització a iOS, canviar la mida del document com abans d’iOS 8, utilitzar la mida de vista petita, utilitzar la mida de vista gran. A partir de les dades que teníem, utilitzar la visió més gran va ser el millor compromís. La majoria dels llocs web amb unitats de visualitzacions semblaven excel·lents la majoria del temps.

Per la meva part, no sóc enginyer a Apple, així que el crec quan diu que hi ha bons motius pels quals van desenvolupar aquest comportament. Així que l'error es va marcar "RESOLVED WONTFIX" i em vaig adonar que, si alguna vegada volia tenir la meva bella i 100% imatge d’heroi, m’havia d’immersionar més a fons.

Solució 1: consultes de suports CSS

Tot i que aquest mètode no és força elegant, és senzill i fàcil d’implementar. N’hi ha prou amb accedir a tots els dispositius iOS amb una amplada i una alçada específics del dispositiu. A continuació, es mostra un codi de cortesia de pburtchaell, en què ".foo" és una classe per al vostre element de tota l'alçada.

@media all i (amplada del dispositiu: 768px) i (alçada del dispositiu: 1024px) i (orientació: retratat) {.foo {altura: 1024px; }} / * iPad amb format de paisatge. * / @media tot i (amplada del dispositiu: 768px) i (alçada del dispositiu: 1024px) i (orientació: paisatge) {.foo {altura: 768px; }} / * iPhone 5 També podeu orientar els dispositius amb relació d’aspecte. * / @media screen i (ratio d’aspecte del dispositiu: 40/71) {.foo {altura: 500px; }}

Si observem el codi anterior, sembla inevitable un lleuger solapament del contingut. Tot i això, els elements amb posicionament i mida que depenen de les unitats de la finestra de presentació es mantenen constants. Això és una victòria! Si s’afegeix un càlcul senzill (100vh - heightOfBar) compensaria la barra d’adreces. Amb tants dispositius i navegadors compatibles, això no sembla una solució sostenible.

Solució 2: Alineació a InsideHeight amb Javascript.

Les dimensions internes es relacionen amb l’alçada / l’amplada de la finestra de vista, tenint en compte les barres de desplaçament verticals / horitzontals. Ara parlem! A continuació, es mostra un esquema d'allò que inclou.

Amb aquest coneixement, podeu utilitzar un guió senzill com aquest per configurar l’alçada de càrrega de la pàgina i mantenir-la constant fins que es redimensiona, des d’usuaris de desbordament per lots a biq:

window.onresize = function () {document.body.height = window.innerHeight; }
window.onresize (); // està anomenat per establir l'alçada primer.

Solució 3: Component de reacció de Div100vh

Com que a tots ens encanta React, volia trobar una solució per als components de React. He trobat un paquet npm de Mikhail Vasin per solucionar aquest problema. Com instal·lar:

npm install - guarda reacció-div-100vh

A continuació, importeu el component i emboliqueu els elements en el següent:

importar Div100vh de "react-div-100vh";
const MyFullscreenComponent = () => ( Les vostres coses van aquí )

I anem!

Després d’haver provat aquestes diferents solucions, m’adono que no hi ha cap solució única per a tot aquest problema. Així que tingueu cura amb les proves de diversos navegadors i de diversos dispositius. I potser haureu d’evitar l’ús del tot de dispositius vh / vw per a dispositius mòbils, ja que el comportament defectuós amb aquests dispositius està ben documentat als navegadors mòbils.

Feu-me saber si aquestes solucions us han estat d’ajuda i quines funcionen millor!