我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它,如果是的话,显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看,则不会出现任何消息。
所以基本上,我想让网站检测视口的方向,如果方向是纵向,然后显示一个警告消息,建议用户这个页面最好在横向模式下查看。
我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它,如果是的话,显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看,则不会出现任何消息。
所以基本上,我想让网站检测视口的方向,如果方向是纵向,然后显示一个警告消息,建议用户这个页面最好在横向模式下查看。
当前回答
如果您有最新的浏览器窗口。定向可能行不通。在这种情况下,使用下面的代码获取角度
var orientation = window.screen.orientation.angle;
这仍然是一个实验技术,你可以在这里检查浏览器兼容性
其他回答
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
jQuery Mobile有一个事件来处理这个属性的变化…如果你想警告如果有人旋转后-定向变化
另外,在谷歌搜索之后,看看窗外。方向(我相信是用度来衡量的…)
编辑:在移动设备上,如果你打开键盘,那么上面可能会失败,所以可以使用屏幕。availHeight和屏幕。availWidth,即使打开键盘也能给出适当的高度和宽度。
if(screen.availHeight > screen.availWidth){
alert("Please use Landscape!");
}
有一种方法可以检测用户是否使用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将被触发,当用户使用纵向模式时,警报将弹出。
screen.orientation.addEventListener("change", function(e) {
console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
下面是我根据David Walsh的文章(检测移动设备的方向变化)找到的最好的方法。
if ( window.matchMedia("(orientation: portrait)").matches ) {
alert("Please use Landscape!")
}
解释:
match media()是一个本地方法,允许您定义媒体查询规则并在任何时间点检查其有效性。
我发现在这个方法的返回值上附加一个onchange侦听器很有用。例子:
var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }
你也可以用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上测试。