Я создаю сайт специально для мобильных устройств. В частности, есть одна страница, которую лучше всего просматривать в альбомной ориентации.
Есть ли способ определить, просматривает ли пользователь, посещающий эту страницу, ее в портретном режиме и, если да, отобразить сообщение, информирующее пользователя о том, что эту страницу лучше всего просматривать в альбомном режиме? Если пользователь уже просматривает его в ландшафтном режиме, сообщение не появится.
Поэтому я хочу, чтобы сайт определял ориентацию области просмотра, если ориентация - " Портрет", а затем отображал предупреждение, сообщающее пользователю, что эту страницу лучше всего просматривать в альбомном режиме.
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
У jQuery Mobile есть событие, которое обрабатывает изменение этого свойства... если вы хотите предупредить, если кто-то поворачивается позже - orientationchange
Кроме того, после некоторого поиска в Google проверьте window.orientation (который, я считаю, измеряется в градусах...)
Вы также можете использовать window.matchMedia, который я использую и предпочитаю, поскольку он очень похож на синтаксис CSS:
if (window.matchMedia("(orientation: portrait)").matches) {
// you're in PORTRAIT mode
}
if (window.matchMedia("(orientation: landscape)").matches) {
// you're in LANDSCAPE mode
}
Протестировано на iPad 2.
Дэвид Уолш имеет лучший и точный подход.
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);
Во время этих изменений свойство window.orientation может измениться. Значение 0 означает портретный вид, -90 означает, что устройство сдвинуто с севера вправо, а 90 означает, что устройство сдвинуто по горизонтали влево.
Вы можете использовать CSS3:
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
Есть несколько способов сделать это, например:
window.orientation значениеinnerHeight vs. innerWidthВы можете адаптировать один из методов ниже.
Проверьте, находится ли устройство в портретном режиме
function isPortrait() {
return window.innerHeight > window.innerWidth;
}
Проверьте, находится ли устройство в ландшафтном режиме
function isLandscape() {
return (window.orientation === 90 || window.orientation === -90);
}
Использование примера
if (isPortrait()) {
alert("This page is best viewed in landscape mode");
}
Как определить изменение ориентации?
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
console.log(orientation);
});
});
Я думаю, что более устойчивым решением является использование экрана вместо окна, потому что это может быть как пейзаж, так и портрет, если вы измените размер своего окна браузера на настольном компьютере.
if (screen.height > screen.width){
alert("Please use Landscape!");
}
Чтобы применить все эти замечательные комментарии к моей ежедневной кодировке, для обеспечения непрерывности между всеми моими приложениями, я решил использовать следующее как в моем мобильном коде jquery, так и в jQuery.
window.onresize = function (event) {
applyOrientation();
}
function applyOrientation() {
if (window.innerHeight > window.innerWidth) {
alert("You are now in portrait");
} else {
alert("You are now in landscape");
}
}
Не пытайтесь исправлять запросы window.orientation(0, 90 и т.д. не означает портрет, пейзаж и т.д.):
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
Даже на iOS7 в зависимости от того, как вы попадаете в браузер 0, не всегда портрет
После некоторых экспериментов я обнаружил, что поворот устройства, ориентированного на ориентацию, всегда вызывает событие окна браузера resize. Поэтому в обработчике resize просто вызовите функцию, например:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
Я объединил два решения, и он отлично работает для меня.
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(orientation: portrait)").matches) {
alert("PORTRAIT")
}
if (window.matchMedia("(orientation: landscape)").matches) {
alert("LANSCAPE")
}
}, false);
Получить ориентацию (в любое время в вашем js-коде) через
window.orientation
Когда window.orientation возвращает 0 или 180, вы находитесь в режиме портретного режима, возвращая 90 или 270, тогда вы находитесь в ландшафтном режиме.
Я не согласен с большинством голосов. Используйте screen, а не window
if(screen.innerHeight > screen.innerWidth){
alert("Please use Landscape!");
}
Это правильный способ сделать это. Если вы подсчитаете с помощью window.height, у вас появятся проблемы с Android. Когда клавиатура открыта, окно сжимается. Поэтому используйте экран вместо окна.
screen.orientation.type - хороший ответ, но с IE.
https://caniuse.com/#search=screen.orientation
//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/
//setup
window.onresize = function(event) {
window_resize(event);
}
//timeout wrapper points with doResizeCode as callback
function window_resize(e) {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}
//wrapper for height/width check
function doResizeCode() {
if(window.innerHeight > window.innerWidth){
alert("Please view in landscape");
}
}
другая альтернатива для определения ориентации, основанная на сравнении ширины/высоты:
var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
orientation = 'landscape';
}
Вы используете его при событии "изменить размер":
window.addEventListener("resize", function() { ... });
Только CCS
@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
body:after{
position: absolute;
z-index: 9999;
width: 100%;
top: 0;
bottom: 0;
content: "";
background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
background-size: 100% auto;
opacity: 0.95;
}
}
В некоторых случаях вам может понадобиться добавить небольшой фрагмент кода для перезагрузки на страницу после того, как посетитель повернул устройство, чтобы CSS был правильно отображен:
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
case 90:
case -90: window.location.reload();
break; }
};
iOS не обновляет screen.width и screen.height при изменении ориентации. Android не обновляет window.orientation, когда он изменяется.
Мое решение этой проблемы:
var isAndroid = /(android)/i.test(navigator.userAgent);
if(isAndroid)
{
if(screen.width < screen.height){
//portrait mode on Android
}
} else {
if(window.orientation == 0){
//portrait mode iOS and other devices
}
}
Вы можете обнаружить это изменение ориентации на Android, а также на iOS со следующим кодом:
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert("the orientation has changed");
}, false);
Если событие onorientationchange не поддерживается, событие event будет событием resize.
$(window).on("orientationchange",function( event ){
alert(screen.orientation.type)
});
Благодаря toododavies для руководства способом.
Для получения предупреждающего сообщения на основе ориентации мобильного устройства вам необходимо реализовать следующий script в function setHeight() {
if(window.innerHeight > window.innerWidth){
alert("Please view in landscape");
}
Вместо 270 это может быть -90 (минус 90).
Это расширяется по предыдущему ответу. Лучшее решение, которое я нашел, - сделать безобидный атрибут CSS, который появляется только при выполнении медиа-запроса CSS3, а затем выполнить JS-тест для этого атрибута.
Так, например, в CSS, который у вас есть:
@media screen only and (orientation:landscape)
{
// Some innocuous rule here
body
{
background-color: #fffffe;
}
}
@media screen only and (orientation:portrait)
{
// Some innocuous rule here
body
{
background-color: #fffeff;
}
}
Затем перейдите к JavaScript (я использую jQuery для funsies). Объявление цвета может быть странным, поэтому вы можете использовать что-то еще, но это самый надежный метод, который я нашел для его тестирования. Затем вы можете просто использовать событие изменения размера для переключения при переключении. Соедините все это для:
function detectOrientation(){
// Referencing the CSS rules here.
// Change your attributes and values to match what you have set up.
var bodyColor = $("body").css("background-color");
if (bodyColor == "#fffffe") {
return "landscape";
} else
if (bodyColor == "#fffeff") {
return "portrait";
}
}
$(document).ready(function(){
var orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
$(document).resize(function(){
orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
});
});
Лучшая часть этого заключается в том, что, когда я пишу этот ответ, он, похоже, не влияет на интерфейсы рабочего стола, поскольку они (как правило) не (кажется) не передают какой-либо аргумент для ориентации на страницу.
Вот лучший метод, который я нашел, основываясь на статье Дэвида Уолша (Определить изменение ориентации на мобильных устройствах)
if ( window.matchMedia("(orientation: portrait)").matches ) {
alert("Please use Landscape!")
}
Объяснение:
Window.matchMedia() - это собственный метод, который позволяет вам определить правило запросов к мультимедиа и проверить его достоверность в любой момент времени.
Мне полезно прикрепить прослушиватель onchange к возвращаемому значению этого метода. Пример:
var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }
Я использовал для Android Chrome Интерфейс ориентации экрана
Чтобы посмотреть текущую ориентацию вызова console.log(screen.orientation.type) (и, возможно, screen.orientation.angle).
Результаты: портрет-первичный | портрет-второстепенный | ландшафтно-первичный | ландшафтная вторичное
Ниже мой код, я надеюсь, что это будет полезно:
var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
function() {
console.log('new orientation is landscape-secondary');
},
function(e) {
console.error(e);
}
);//here Promise
...
screen.orientation.unlock();
screen.orientation.addEventListener("change", function(e) {
console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
Объект window в JavaScript на устройствах iOS имеет свойство ориентации, которое может использоваться для определения поворота устройства. Ниже показано значение window.orientation для устройств iOS (например, iPhone, iPad, iPod) в разных направлениях.
Это решение также работает и для устройств Android. Я проверил в своем браузере Android и в браузере Chrome даже в старых версиях.
function readDeviceOrientation() {
if (Math.abs(window.orientation) === 90) {
// Landscape
} else {
// Portrait
}
}
Это то, что я использую.
function getOrientation() {
// if window.orientation is available...
if( window.orientation && typeof window.orientation === 'number' ) {
// ... and if the absolute value of orientation is 90...
if( Math.abs( window.orientation ) == 90 ) {
// ... then it landscape
return 'landscape';
} else {
// ... otherwise it portrait
return 'portrait';
}
} else {
return false; // window.orientation not available
}
}
Реализация
window.addEventListener("orientationchange", function() {
// if orientation is landscape...
if( getOrientation() === 'landscape' ) {
// ...do your thing
}
}, false);
Если у вас установлены последние версии браузера, window.orientation может не работать. В этом случае используйте следующий код для получения угла -
var orientation = window.screen.orientation.angle;
Это все еще экспериментальная технология, вы можете проверить совместимость браузера здесь
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotation Test</title>
<link type="text/css" href="css/style.css" rel="stylesheet"></style>
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$("#mode").text("LANDSCAPE");
} else {
// Portrait
$("#mode").text("PORTRAIT");
}
}, false);
</script>
</head>
<body onorientationchange="updateOrientation();">
<div id="mode">LANDSCAPE</div>
</body>
</html>
Там, где вы можете определить, переключил ли пользователь свое устройство в портретный режим, используя screen.orientation
Просто используйте следующий код:
screen.orientation.onchange = function () {
var type = screen.orientation.type;
if (type.match(/portrait/)) {
alert('Please flip to landscape, to use this app!');
}
}
Теперь onchange будет запущен, когда пользователь перевернет устройство, и появится сообщение, когда пользователь будет использовать портретный режим.
Одно замечание о window.orientation заключается в том, что оно вернет undefined, если вы не находитесь на мобильном устройстве. Таким образом, хорошая функция для проверки ориентации может выглядеть так: x window.orientation:
//check for orientation
function getOrientation(x){
if (x===undefined){
return 'desktop'
} else {
var y;
x < 0 ? y = 'landscape' : y = 'portrait';
return y;
}
}
Назовите его так:
var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
o = getOrientation(window.orientation);
console.log(o);
}, false);
Или вы могли бы просто использовать это.
window.addEventListener("orientationchange", function() {
if (window.orientation == "90" || window.orientation == "-90") {
//Do stuff
}
}, false);