Я хотел бы «повернуть» мой сайт на 90 градусов, когда пользователь помещает свой телефон в ландшафт, чтобы не дать им максимально использовать ландшафт на телефоне. Возможно ли это в javascript (я бы работал в разделе <head>)?Предотвращение просмотра пользователем сайта в ландшафте на мобильном телефоне
Благодаря
В не-JQuery путь. Не увеличивайте вес страницы на 90 килобайт, если вам действительно не нужно!
window.addEventListener('resize', function(){
if (window.innerHeight < window.innerWidth){
document.body.style.transform = "rotate(90deg)";
document.body.style.webkitTransform = "rotate(90deg)";
document.body.style.mozTransform = "rotate(90deg)";
}
});
Кроме того, остерегайтесь UX этого. Это может серьезно повредить вашим пользователям, если они этого не ожидают. Это абсолютно необходимо?
$(window).resize(function(){
if($(this).height() < $(this).width()){
$("body").css("transform","rotate(90deg)");
}
});
DOC: https://api.jquery.com/resize/
И не забудьте добавить библиотеку Jquery.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
EDIT:
, если вы используете только JavaScript:
window.onresize = function(e) {
var w = this.innerWidth;
var h = this.innerHeight;
if(h < w){
document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
}
};