我正在建立一个专门为移动设备设计的网站。特别是有一页最好在横向模式下查看。
有没有办法检测访问该页面的用户是否在纵向模式下查看它，如果是，则显示一条消息，通知用户该页面最好在横向模式下查看？如果用户已经在横向模式下查看它，则不会出现任何消息。
所以基本上，我希望网站检测视口方向，如果方向是Portrait，然后显示一条警告消息，建议用户最好在横向模式下查看此页面。
检测视口方向，如果方向是纵向显示警告消息，通知用户说明
IT技术
javascript
jquery
mobile
viewport
device-orientation
2021-01-31 18:05:33
6个回答
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
jQuery Mobile 有一个处理此属性更改的事件...如果您想在稍后有人轮换时发出警告 - orientationchange
此外，经过一些谷歌搜索后，请查看window.orientation（我相信这是以度数来衡量的......）
编辑：在移动设备上，如果您打开键盘，则上述操作可能会失败，因此可以使用screen.availHeightand screen.availWidth，即使在键盘打开后也能提供适当的高度和宽度。
if(screen.availHeight > screen.availWidth){
alert("Please use Landscape!");
}
您也可以使用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对比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);
});
});
其它你可能感兴趣的问题