我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它,如果是的话,显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看,则不会出现任何消息。
所以基本上,我想让网站检测视口的方向,如果方向是纵向,然后显示一个警告消息,建议用户这个页面最好在横向模式下查看。
我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它,如果是的话,显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看,则不会出现任何消息。
所以基本上,我想让网站检测视口的方向,如果方向是纵向,然后显示一个警告消息,建议用户这个页面最好在横向模式下查看。
当前回答
另一种基于宽度/高度的比较来确定方向的方法:
var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
orientation = 'landscape';
}
你在"resize"事件上使用它:
window.addEventListener("resize", function() { ... });
其他回答
$(window).on("orientationchange",function( event ){
alert(screen.orientation.type)
});
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
jQuery Mobile有一个事件来处理这个属性的变化…如果你想警告如果有人旋转后-定向变化
另外,在谷歌搜索之后,看看窗外。方向(我相信是用度来衡量的…)
编辑:在移动设备上,如果你打开键盘,那么上面可能会失败,所以可以使用屏幕。availHeight和屏幕。availWidth,即使打开键盘也能给出适当的高度和宽度。
if(screen.availHeight > screen.availWidth){
alert("Please use Landscape!");
}
我把两个解决方案结合起来,对我来说效果很好。
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(orientation: portrait)").matches) {
alert("PORTRAIT")
}
if (window.matchMedia("(orientation: landscape)").matches) {
alert("LANSCAPE")
}
}, false);
你可以使用CSS3:
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
大卫·沃尔什的方法更好,更切中要害。
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);
在这些更改期间,窗口。方向属性可能会改变。值为0表示纵向视图,-90表示设备横向向右旋转,90表示设备横向向左旋转。
http://davidwalsh.name/orientation-change