Hola!
Como puedo hacer para bloquear web en landscape y solo visible en portrait. Es decir solo quiero que en la parte del movil se vea en portratir y si se gira a landscape que se mantenga como portrait.
¿Se puede hacer con un codigo css?
URL del sitio: Contenido solo visible a usuarios registrados
Hola Javier.
Prueba si con esto te puede funcionar:
#cont_escalable { display:block; } @media only screen and (orientation:portrait){ #cont_escalable { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } } @media only screen and (orientation:landscape){ #cont_escalable { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } }
Otra forma seria mediante 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); });
Nota: Recuerda realizar una copia del archivo antes de cualquier modificación, solo con un copia y pega en el block de notas tendrás suficiente para dejarlo como estaba anteriormente.
Un saludo
el primero en CSS no me funciona, como puedo insertar mediante javascript?
Hola
Tu sitio web esta en WordPress?, en tal caso debes buscar el theme que estas usando y luego dentro de este posiblemente exista un carpeta js o script en donde tienes los scripts que carga tu theme, puedes poner el código dentro de alguno de estos archivos.
Saludos.
Lo acabo de poner en : /wp-content/themes/samarcanda/js
jquery.custom.js
Pero no funciona....
ADJUNTO EL ARCHIVO
Hola Javier.
No tenemos nada adjunto.
El tema de no permitir que rote la web es un poco complicado ya que depende de la configuración del móvil.
Revisa lo siguiente, sobre todo el apartado ' CSS3 Media Queries '-> http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-media-queries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-and-html5-part-5/
Un saludo
vale, pero que tengo que poner para que funcione?
porque esto no funciona:
$(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);
});
Hola
No veo que tu sitio tenga este archivo .js :
Contenido solo visible a usuarios registrados
Es este el sitio web en el que estas aplicando los cambios?, envía la url correcta del sitio.
Saludos.
url: http://www.casasdesevilla.com/
Necesito solo este ultimo cambio porfavor.
Hola
De manera general la plantilla que estas usando tiene problemas.
Si por ejemplo restringes que no se pueda rotar, esto no significa que se corregirá el problema ya que si por ejemplo tienes un dispositivo que tiene el mismo ancho del landscape que quieres restringir entonces se verá igual mal.
Tal como te comentamos anteriormente será mejor que muevas tu sitio a nuestros servidores para darte más indicaciones, por política no atendemos sitios fuera de nuestro hosting.
Saludos.