блокировка ориентации экрана в мобильном браузере

Я создаю веб-страницу (chrome & сафари) для мобильных телефонов (iphone & android), я хочу заблокировать ориентацию экрана в портретном режиме.блокировка ориентации экрана в мобильном браузере

В отличие от мобильных приложений, нет файла манифеста и активности, поскольку это веб-страница.

Как заблокировать ориентацию в мобильных устройствах с использованием технологий (css/javascript/bootstrap/jquery) или любого другого?

источник

2014-10-09 dosth reddy

Какой язык вы используете? – reptildarat

Я использую HTML5 –

Вы можете использовать:

screen.addEventListener("orientationchange", function() { 
    console.log("The orientation of the screen is: " + screen.orientation); 
}); 

and 

screen.lockOrientation('landscape');

После: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

источник

2014-10-09 05:55:17

: спасибо за help.but выше код doesn, t, похоже, работает на chrome.Is там любое другое решение? –

try body [orient = "landscape"] или body [orient = "portrait"] –

lockOrientation метод блокирует экран в заданной ориентации.

lockedAllowed = window.screen.lockOrientation(orientation);

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

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 

if (lockOrientation("landscape-primary")) { 
    // orientation was locked 
} else { 
    // orientation lock failed 
}

см. Следующую ссылку, вы получите представление об этом.

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

источник

2014-10-09 06:12:19 MFP

Данный код не работает на chrome и safari.Is there any other solution.Спасибо –

Из моих тестов, назначая screen.lockOrientation (каждый браузер версии) в вар бросить недопустимую ошибку вызова. Просто используйте wind.screen.orientation.lock («пейзаж»); , Это

EDIT: Вы не можете использовать ориентацию блокировки на сафари, потому что она не поддерживает полноэкранный api в настоящий момент http://caniuse.com/#feat=fullscreen. API ориентации блокировки НЕОБХОДИМО использовать полноэкранную страницу. В Chrome окно window.screen.orientation.lock возвращает обещание. Итак, после того, вы идете на весь экран со страницей, вы можете сделать что-то вроде этого:

var lockFunction = window.screen.orientation.lock; 
if (lockFunction.call(window.screen.orientation, 'landscape')) { 
      console.log('Orientation locked') 
     } else { 
      console.error('There was a problem in locking the orientation') 
     }

Однако ориентация блокировки и полноэкранный API все еще экспериментальные, не все браузеры поддерживают его.

источник

2014-12-09 15:23:11

Я думаю, что ваш ответ не заполнен –

Возможно, ответ был неполным, но я не думаю, что остальные 2 были полными: просто вырезать и вставить из MDN. По крайней мере, я дал рабочую реализацию API. –

Это работает на Chrome для Android! Числовое число, которое опущено, является стороной pooper. –

Я использую файл манифеста для своего веб-приложения, которое блокирует ориентацию для Chrome на моем Android. По какой-то причине Safari дает своим пользователям «право» делать это, но не дизайнеры веб-приложения ... Похоже на нарушение авторских прав или что-то в этом роде! ;) Не заставляйте меня начинать с позорной перезаписи/рендеринга кнопок Safari! ...

В любом случае, вернемся к ответу.

1) Включите ссылку на свой манифест в пределах head раздел страницы:

<link rel="manifest" href="http://yoursite.com/manifest.json">

2) Создать свой файл манифеста, "manifest.json"

{ 
"name":"A nice title for your web app", 
"display":"standalone", 
"orientation":"portrait" 
}

3) Подробнее о манифестах HERE

источник

2014-12-30 17:47:00 bcintegrity

В примечании: это работает только в автономном режиме. –

Что вы имеете в виду с автономным? –

Перейдите по ссылке в сообщении или посетите страницу https://developer.chrome.com/multidevice/android/installtohomescreen, чтобы получить дополнительную информацию по этой теме. – bcintegrity

блокировка ориентации экрана в мобильном браузере

ответ

Смежные вопросы