Tengo una duda espero me puedan ayudar. Tengo un media query para una resolucion movil pero quiero restringir la orientacioón horizontal, alguien sabe como se puede hacer eso.
-
1Hola obed, bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. Después, busca en el sitio a ver si ya está la respuesta (creo que deberia existir) y sino, muestranos lo que has investigado e intentado para que podamos ayudarte sobre tu problema concreto. Mira Cómo preguntar y ejemplo mínimo verificable para más info. Un saludo– lois6bel 9 oct. 2018 a las 14:11
3 respuestas
puedes probar de esta forma
@media only screen and (orientation:portrait){ }
@media only screen and (orientation:landscape){ }
y también lo puedes intentar con JavaScript:
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
Con CSS no puedes restringir o evitar que rote el dispositivo, pero puedes crear un CSS para cuando este horizontal la pantalla orientation:landscape
ó vertical orientation:portrait
; para activar cuando se usa uno u otro en tu HTML donde haces referencia a tu archivo CSS puedes indicar con el atributo media cuando se usa uno y cuando se usa otro, ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Titulo</title>
<link rel="stylesheet" href="../portrait.css" media="only screen and (orientation:portrait)">
<link rel="stylesheet" href="../landscape.css" media="only screen and (orientation:landscape)">
</head>
Como veras hay dos referencias en el HTML a dos archivos CSS, uno llamado portrait.css
y el otro landscape.css
, y en dichas referencias hay un atributo media
con el valor only
el cual indica que solo se usara si y solo si pasa lo siguiente: screen and (orientation:portrait|landscape)
. Al decir esto estas diciendo que se ejecutara ese CSS cuando la pantalla tenga una orientación horizontal ó vertical.
Ahora si tienes un archivo CSS puedes también hacer dicha regla en ese archivo así:
@media only screen and (orientation:portrait) {
border:1px solid red;
}
@media only screen and (orientation:landscape) {
border:1px solid blue;
}
Con esto puedes dividir el comportamiento del CSS según la orientación de tu dispositivo.