Блокировка поворота устройства на мобильных веб-страницах
Можно ли обнаружить на моей странице, например, с помощью Javascript, когда пользователь посещает ее с мобильного устройства в портретном режиме, и остановить изменение ориентации, когда пользователь поворачивает свой телефон в альбомную? На моей странице есть игра, оптимизированная только для портретного отображения, и я не хочу, чтобы она была в альбомной.
3 ответа
Вы можете использовать свойства screenSize.width и screenSize.height и определять, когда ширина> высоты, а затем обрабатывать эту ситуацию, либо сообщив об этом пользователю, либо настроив экран соответствующим образом.
Но лучшее решение - это то, что говорит @ Doozer1979 ... Зачем вам отменять то, что предпочитает пользователь?
В браузерах с поддержкой JavaScript должно быть легко определить, находится ли экран в альбомном или портретном режиме, и компенсировать с помощью CSS . Может быть полезно дать пользователям возможность отключить это или, по крайней мере, предупредить их, что ротация устройств не будет работать должным образом.
Редактировать
Самый простой способ определить ориентацию браузера - это сравнить ширину браузера с его высотой. Это также имеет то преимущество, что вы будете знать, играет ли игра на устройстве, которое естественно ориентировано в ландшафтном режиме (как некоторые мобильные устройства, такие как PSP). В этом больше смысла, чем пытаться отключить вращение устройства.
Edit 2
Daz показал, как можно определять ориентацию устройства, но определение ориентации - это только половина решения.Если вы хотите отменить автоматическое изменение ориентации, вам нужно будет повернуть все на 90 ° или 270 ° / -90 °, например
$(window).bind('orientationchange resize', function(event){
if (event.orientation) {
if (event.orientation == 'landscape') {
if (window.rotation == 90) {
rotate(this, -90);
} else {
rotate(this, 90);
}
}
}
});
function rotate(el, degs) {
iedegs = degs/90;
if (iedegs < 0) iedegs += 4;
transform = 'rotate('+degs+'deg)';
iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
styles = {
transform: transform,
'-webkit-transform': transform,
'-moz-transform': transform,
'-o-transform': transform,
filter: iefilter,
'-ms-filter': iefilter
};
$(el).css(styles);
}
Примечание: если вы хотите повернуть в IE на произвольный угол (для других целей), вам нужно будет использовать матричное преобразование, например
rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
+ "M11 = " + m11 + ", "
+ "M12 = " + m12 + ", "
+ "M21 = " + m21 + ", "
+ "M22 = " + m22 + ", sizingMethod = 'auto expand')";
styles['filter'] = styles['-ms-filter'] = iefilter;
- или используйте CSS наждачную бумагу . Кроме того, это применяет стиль вращения к объекту окна, который я никогда не тестировал и не знаю, работает он или нет. Вместо этого вам может потребоваться применить стиль к элементу документа.
В любом случае, я бы по-прежнему рекомендовал просто отображать сообщение, предлагающее пользователю сыграть в игру в портретном режиме.
Вы можете обнаружить изменение ориентации, но я не думаю, что вы можете его предотвратить.