Adaptar pantallas en página web para android, iPad y iPhone

Adaptar pantallas optimizado para iPad, iPhone y Android

Cuando se crea páginas web, lo primero que te dices es que debes adaptar pantallas para iphone, ipad y android y hace unos meses tuve la posibilidad de comprar un ipad, y por parte de mi trabajo tengo un iphone, me di cuenta que los emuladores como el de Google chrome te ayudan pero no es igual la visualización de tu página web.

Aqui colocare unos consejos y formas como detectar iOS y android y adaptar pantallas en páginas web.

No dejar escalar

Algo muy común es que en los teléfonos nos dicen que son 1920 x 1080, o son resolución 4k, aunque si alcanza esas resoluciones, en si son pixeles escalados, lo que vamos a hacer es evitar que escale, ya que el tamaño real de la pantalla no contiene esa cantidad de pixeles.

para esto necesitamos poner el siguiente código meta en el archivo html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Detectar resoluciones en iOS y Android y adaptar pantallas con css

En teoría no detectamos si es ios o android, lo que vamos a hacer es detectar las medidas que mantienen estas pantallas por ejemplo:

Medida de pantalla iPad / iPad mini :  768px  X 1024px.

Medida de pantalla iPad Pro: 1024px X 1366px

Medida de pantalla iPhone 5/5s: 320px X 568px

Medida de pantalla Iphone 6/7/8: 375px X 667px

Medida de pantalla Iphone X : 375px X 812px

Medida de pantalla Tablet Android: 700px a 1024px

Medidas de pantalla Celulares Android: 320px a 600px

Mediante estas medidas podemos hacer nuestros css de tal manera de adaptarlas a cada una, generalmente lo que se hace es hacer medidas maximas y minimas y asi agruparlos.

Dejare un pequeño css donde detecta los tamaños y muestra colores distintos

html y css

<!DOCTYPE html>
<html>

<head>
    <title>Ios JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/ios.css" type="text/css" rel="stylesheet" />
    <script src="./js/ios.js" type="text/javascript"></script>

</head>

<body>
    <p id="cambio">Hola</p>

</body>

</html>

* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    align-self: center;
    background-color: white;
    justify-content: space-around;
}

p {
    font-size: x-large;
    font-weight: bold;
    text-align: center;
}

@media (max-width: 1600px) {
    body {
        background-color: wheat;
    }
}

@media (max-width: 1024px) {
    body {
        background-color: slategrey;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    body {
        background-color: black;
    }
    p {
        color: white;
    }
}

@media (max-width: 770px) {
    body {
        background-color: chocolate;
    }
}

@media (max-width: 770px) and (orientation: portrait) {
    body {
        background-color: grey;
    }
}

@media (max-width: 770px) and (orientation: landscape) {
    body {
        background-color: darkblue;
    }
    p {
        color: red
    }
}

@media(max-width: 600px) {
    body {
        background-color: turquoise;
    }
}

@media(max-width: 600px) and (orientation: landscape) {
    body {
        background-color: royalblue;
    }
    p {
        color: plum;
    }
}

 

Ipad con orientación portrait y landscape

 

 

 

 

 

 

 

iPhone con orientación portrait y landscape

 

 

 

 

 

 

 

Con esto ya podemos hacer nuestra web responsiva con puro css, detectando si el dispositivo cambió su orientación , y sin gastar más recursos, podemos ahorrarnos unos pasos no poniendo el media orientation aunque con iOS puedes llegar a tener unos problemas.

Detectar resolucion de pantallas

Otra forma de detectar y adaptar pantallas es tomando la resolución real, aunque este no es óptimo puede funcionar, este mecanismo generalmente es usado para cambiar cosas muy específicas del código, para esto hay dos formas eficiente a usar.

si usamos la propiedad screen de javascript, vamos a tener los valores reales de nuestra pantalla, es decir sin importar marcos de navegador, estos se usan de la siguiente forma:

screen.width y screen.height.

 

Otra forma es usar la propiedad offsetHeight offsetWidth, la diferencia de este es que la medida es del espacio que tenemos trabajo, es decir quitara los espacio que consume la barra de tarea de windows (o cualquier S.O.) y la del navegador que usemos.

y si se quiere adaptar pantallas automáticamente cuando cambie la resolución no olviden usar onresize.

Detectar plataformas iOS y Android

Una de las ventajas de javascript es que podemos detectar la plataforma que usemos, para hacer esto vamos a usa navigator de javascript, aunque tiene muchas propiedades vamos a utilizar 2 en especial.

para detectar android tenemos que usar navigator.userAgent.match(/Android/i) con esto podemos detectar si la plataforma es android.

para detectar iOS vamos a utilizar navigator.platform y con esto podemos identificarlo ya que te arroja un string:

  • “iPhone”
  • “iPad”

Este es el código para detectar las plataformas

function plataformaEs() {
    if (navigator.platform == "iPhone" || navigator.platform == "iPad") {
        alert(navigator.platform);
    } else {
        if (navigator.userAgent.match(/Android/i)) {
            alert(navigator.userAgent);
        } else {
            alert(navigator.platform + " mira la consola");
            console.log(navigator);
        }
    }
}

con esto podemos adaptar pantallas de forma mas personalizada, ya que por ejemplo, un modal que bloquee el scroll funciona mejor en android que en iOS, en estos casos podemos identificar y adaptar de forma muy específica.

Live

repositorio del proyecto

Deja un comentario