Мобильный сайт - принудительно только ландшафт / без автоповорота

У меня есть сайт с мобильной таблицей стилей:

<link rel="stylesheet" href="css/mobile.css" media="handheld">

Я также использую jQuery для проверки мобильных устройств и соответственно изменяю функциональность.

Но я хочу знать, есть ли способ принудительно установить альбомную ориентацию и отключить автоповорот? Либо решение CSS, либо JQuery было бы хорошо.

Спасибо!

Ответы на вопрос(5)

что лучший подход - это сценарий, чтобы при изменении пользователя он менялся. Я изменил это так, чтобы он вращал основную DIV вашей страницы в портретном режиме, заставляя пользователя переключаться. Если они не хотят наклонить голову в сторону:

<script type="text/javascript">
    (function () {
        detectPortrait();
        $(window).resize(function() {
            detectPortrait("#mainView");
        });


        function detectPortrait(mainDiv) {
            if (screen.width < screen.height) {
                $(mainDiv).addClass("portrait_mode");
            }
            else {
                $(mainDiv).removeClass("portrait_mode");
            }
        }
    })();
</script>
<style type="text/css">
    .portrait_mode {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>
 28 сент. 2014 г., 23:25
Это определенно сломало бы любую анимацию JS и мобильную отзывчивость страницы. Это вызовет больше проблем для разработчика и не может рассматриваться как исправление.
 17 авг. 2015 г., 11:30
@ WissamEl-Kik Он по-прежнему делает то, что хочет ОП. И действительно, то, что просит OP, также нарушит мобильность, так что вы не можете винить этот ответ за это! Хотя он действительно не нуждается в JavaScript; вызывая это сorientation: portrait Медиа-запрос также будет работать.

аксимальную ширину в коде CSS, попробуйте использовать этот код

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { 
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0; 
}}

надеюсь решить вашу проблему.

но можете предлагать или блокировать контент в режиме portarit.

я сделалприспособление изсуществующий скрипт

в ваш HTML-файл добавить элемент Div

<div id="block_land">Turn your device in landscape mode.</div>

Затем адаптируйте свой CSS, чтобы охватить всю вашу страницу

#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}

Затем добавьте небольшой JavaScript для определения ориентации

function testOrientation() {
  document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}

Не забудьте проверить ориентацию в onload и onorientationchange, может быть, в теге вашего тела

<body onorientationchange="testOrientation();" onload="testOrientation();">

Дайте мне знать, если это решение работает для вас.

 01 мая 2014 г., 09:21
Поэтому я попытался найти аналогичное решение, и проблема, с которой я столкнулся, заключается в том, что у нескольких человек была заблокирована ориентация. Таким образом, это было действительно раздражающим для них, чтобы разблокировать. В идеале страница должна отображаться в альбомной ориентации (как это делают многие игровые приложения). Посмотрим, как использовать вращение CSS, чтобы решить эту проблему.

и он заставил браузер использовать портретный режим:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

Этот код был протестирован на iPhone и на другом мобильном устройстве.

 18 апр. 2015 г., 21:47
извините, сэр, я думаю, что код только запрещает пользователю увеличивать или уменьшать масштаб. Протестировано на Safari в iphone 4S и Chrome в Android 4.3, возможны как альбомный, так и портретный режим.

чтобы проверить ориентацию, в книжной таблице стилей все спрятать и показать сообщение, что приложение работает только в ландшафтном режиме.

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

Я думаю, что лучший подход

Ваш ответ на вопрос