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 y 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.