La pregunta puede ser un tanto confusa, pues bien, me voy a explicar un poco.
Resulta que estaba creando un formulario, el cual tenía determinados estilos que cambiaban dependiendo de una regla @media
de CSS (en este caso con la orientación).
[Todo esto lo estoy probando con la pantalla en vertical]
Cuando visualizaba la página en mi iPad se veía todo correctamente, pues bien, cogí mi teléfono (Android) y abrí mi página usando Google Chrome, y sí, también se mostraba correctamente, pero el problema viene ahora, cuando pulso en un <input>
para escribir en él, el navegador reconoce la pantalla como si estuviese en horizontal, pero lo mejor de todo es que esto solo me ocurre cuando pulso sobre un <input>
de tipo texto <input type="text">
, sin embargo cuando pulso sobre un <input>
de tipo número <input type="number">
el navegador sigue reconociendo que la pantalla está en vertical (que es lo correcto).
Después de esto me hice un pequeño ejemplo para ver el ancho y el alto de la ventana del navegador en píxeles, para ello puse dos inputs
dentro de un contenedor, uno de ellos de tipo text
y el otro de tipo number
.
Una vez teniendo esto listo me puse a probarlo, [el tamaño de la ventana al cargar la página era de 1012x1530
], cuando pulsaba el <input type="number">
el tamaño de la ventana se reducía a 1012x1033
=> sigue siendo vertical, sin embargo al pulsar el el tamaño de la ventana pasa a ser de 980x912
=> ya no puede ser reconocido como vertical, el ancho está siendo superior al alto, lo cual CSS
ya no está aplicando el estilo que tengo establecido para una pantalla vista en vertical.
Aquí dejo unos ejemplos gráficos:
En esta imagen, se muestra la resolución nada más cargar la página:
En esta otra, pulsando sobre el
<input type="number">
:Y por último pulsando en el
<input type="text">
También voy a dejar adjuntado el pequeño guión que hice para realizar este ejemplo:
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
setInterval(function() {
document.getElementById("log").innerHTML = window.innerWidth +'x'+window.innerHeight;
}, 200);
});
</script>
<style>
#log {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
background: #000;
color: #fff;
font-size: 40px;
padding: 15px;
}
#container {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
background: #fff;
padding: 20px;
margin-top: 30px;
border-radius: 5px;
text-align: center;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
input {
width: 80%;
font-size: 30px;
background: transparent;
color: #666;
margin: 10px 0px 10px 0px;
border: 2px solid #888;
}
@media screen and (orientation: portrait) {
#container {
width: 100%;
}
}
</style>
</head>
<body>
<div id="log"></div>
<div id="container">
<label for="text">Text:</label>
<input id="text" type="text"><br>
<label for="number">Number:</label>
<input id="number" type="number">
</div>
</body>
</html>
NOTA: esto solamente me ocurre (por lo menos hasta lo que he conseguido probar) en Opera y en Google Chrome (en sistemas operativos Android), sin embargo en sistemas operativos iOS no ocurre esto, funciona perfectamente con ambos tipos de
<input>
. He podido apreciar con mi ejemplo de código, que al probarlo en iOS, las dimensiones de la pantalla no se alteraban.
Gracias por cualquier ayuda posible :)
jquery
y el<script>
de tu index ?