Мобильный сайт - только принудительный пейзаж/без автоматического поворота

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

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

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

Но я хочу знать, есть ли способ принудительно ориентировать только ландшафт и отключать автоматическое вращение? Или CSS или jQuery-решение будет в порядке.

Спасибо!

Ответ 1

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

<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)">

Я думаю, лучше всего aproach

Ответ 2

Вы не можете принудительно настроить ориентацию на веб-странице, но вы можете предлагать или блокировать контент в режиме portarit.

Я создал адаптацию существующий script

в вашем 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 litle для определения ориентации

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

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

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

Сообщите мне, будет ли это решение работать для вас.

Ответ 3

Я думаю, что лучший подход - это script, чтобы при изменении пользователя он менялся. Я изменил это так, чтобы он вращал главную страницу 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>

Ответ 4

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

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

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

Ответ 5

Простой способ принудительной ориентации ландшафта задает вашу минимальную ширину в коде 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; 
}}

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