O meu sitio web sensible non funciona. A solución: ventá gráfica.

My Responsive Website Isn T Working

Un amigo meu púxose en contacto recentemente comigo para pedir axuda cun sitio de WordPress que construíra usando o tema X. O seu cliente chamárao esa mañá despois de que se decatase de que o seu sitio web non se amosaba correctamente no seu iPhone. Nick comprobouno el mesmo e, con certeza, o fermoso deseño sensible que deseñou xa non funcionaba.



Aínda máis o desconcertou o feito de que cando redimensionou a xanela do seu navegador no escritorio, o sitio foi sensible, pero no seu iPhone só se amosaba a versión de escritorio. Por que sería un sitio responsivo nun ordenador de escritorio e non responde nun dispositivo móbil?



Por que o deseño sensible non funciona

O deseño responsivo deixa de funcionar cando falta unha liña de código na cabeceira dun ficheiro HTML. Se falta esta única liña de código, o seu iPhone, Android e outros dispositivos móbiles asumirán que o sitio web que está a ver é un sitio de escritorio de tamaño completo e axustará o tamaño do ventá gráfica para abarcar toda a pantalla.

Que queres dicir con tamaño gráfico e pantalla gráfica?

En todos os dispositivos, o tamaño da ventá gráfica refírese ao tamaño da área dunha páxina web que actualmente é visible para o usuario. Imaxina que tes un iPhone 5 cun ancho de 320 píxeles. A non ser que se indique de xeito explícito o contrario, os iPhones supoñen que todos os sitios web que visita son un sitio de escritorio cunha anchura de 980 px.



Agora, usando o teu imaxinario iPhone 5,visita un sitio web deseñado para o escritorio que ten 800 px de ancho. Non ten un deseño responsivo, polo que o teu iPhone mostra a versión de escritorio de ancho completo.

Pero un iPhone 5 ten só 320 píxeles de ancho. ¿Non é sempre o tamaño da ventá gráfica?

Non, non e. Co tamaño da ventá, pode implicarse a escala . O iPhone ten que reducir o zoom para ver a versión de ancho completo da páxina web. Lembre que a ventá gráfica fai referencia á área dunha páxina que actualmente é visible para o usuario. ¿Está a ver o usuario do iPhone só 320 píxeles da páxina ou está a ver a versión de ancho completo?



É certo: están a ver a páxina web de ancho completo na súa pantalla porque o iPhone asumiu o seu comportamento predeterminado: reduciuse o zoom para que o usuario poida ver unha páxina web de ata 980 píxeles de ancho. Polo tanto, a pantalla gráfica do iPhone ten 980 px.

Ao achegar ou reducir o tamaño da ventá gráfica cambia. Antes dixemos que o noso sitio web imaxinario ten un ancho de 800 px, polo que se achegas o zoom ao iPhone para que os bordos do sitio web toquen os bordos da pantalla do teu iPhone, a ventá gráfica sería de 800 px. O iPhone pode ten unha ventá de visualización de 320 píxeles nun sitio de escritorio, pero se o fixese, só vería unha pequena parte del.

O meu sitio web sensible está roto. Como o soluciono?

A resposta é unha única liña de HTML que, cando se insire na cabeceira dunha páxina web, indica ao dispositivo que axuste a ventana gráfica ao seu ancho (320 píxeles no caso dun iPhone 5) e que non axuste (nin amplíe) a páxina.

Para unha discusión máis técnica de todas as opcións relacionadas con esta metaetiqueta, consulte este artigo en tutsplus.com .

Como solucionar o tema WordPress X cando non responde

Volve ao meu amigo de antes: esta liña de código desapareceu cando actualizou o tema X. Ao solucionar o seu, teña en conta que o tema X non usa só un ficheiro de cabeceira: usa ficheiros de cabeceira diferentes para cada pila, polo que terá que editalo.

Dado que Nick usa o tema Ethos de pila X, tivo que engadir unha liña de código que mencionei antes ao ficheiro de cabeceira que estaba situado en x /frameworks/views/ethos/wp-header.php . Se usa unha pila diferente, substitúa o nome da súa pila (Integrity, Renew, etc.) por 'ethos' para atopar o ficheiro de cabeceira correcto. Insira esa liña e voilá! Está ben para ir.

Entón isto soluciona as miñas consultas multimedia CSS, tamén?

Cando insiras esa liña na cabeceira do teu ficheiro HTML, as túas consultas de resposta @media comezarán de novo a funcionar de novo e a versión móbil do teu sitio web volverá a revivir. Grazas por ler e espero que axude!

Lembre de Payette Forward,
David P.