Javascript 检测视口方向，如果方向是纵向显示警告消息，通知用户说明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4917664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions
提问by Dan
I am building a website specifically for mobile devices. There is one page in particular which is best viewed in landscape mode.
我正在建立一个专门为移动设备设计的网站。特别是有一页最好在横向模式下查看。
Is there a way to detect if the user visiting that page is viewing it in Portrait mode and if so, display a message informing the user that the page is best viewed in landscape mode? If the user is already viewing it in landscape mode then no message will appear.
有没有办法检测访问该页面的用户是否在纵向模式下查看它，如果是，则显示一条消息，通知用户该页面最好在横向模式下查看？如果用户已经在横向模式下查看它，则不会出现任何消息。
So basically, I want the site to detect the viewport orientation, if orientation is Portrait, then display an alert message advising the user that this page is best viewed in Landscapemode.
所以基本上，我希望网站检测视口方向，如果方向是Portrait，然后显示一条警告消息，建议用户最好在横向模式下查看此页面。
回答by tobyodavies
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange
jQuery Mobile 有一个处理此属性更改的事件...如果您想在稍后有人轮换时发出警告 - orientationchange
Also, after some googling, check out window.orientation(which is I believe measured in degrees...)
此外，经过一些谷歌搜索后，请查看window.orientation（我相信这是以度数来衡量的......）
回答by crmpicco
You can also use window.matchMedia, which I use and prefer as it closely resembles CSS syntax:
您也可以使用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
}
Tested on iPad 2.
在 iPad 2 上测试。
回答by Jatin
David Walsh has a better and to the point approach.
大卫沃尔什有一个更好的、切中要害的方法。
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);
During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.
在这些更改期间，window.orientation 属性可能会更改。值 0 表示纵向视图，-90 表示设备横向旋转到右侧，而 90 表示设备横向旋转到左侧。
回答by Thomas Decaux
You can use CSS3 :
您可以使用 CSS3 ：
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
回答by martynas
There are a few ways to do it, for example:
有几种方法可以做到，例如：
- Check
window.orientationvalue - Compare
innerHeightvs.innerWidth
- 检查
window.orientation值 - 对比
innerHeight对比innerWidth
You can adapt one of the methods below.
您可以采用以下方法之一。
Check if device is in portrait mode
检查设备是否处于纵向模式
function isPortrait() {
return window.innerHeight > window.innerWidth;
}
Check if device is in landscape mode
检查设备是否处于横向模式
function isLandscape() {
return (window.orientation === 90 || window.orientation === -90);
}
Example usage
示例用法
if (isPortrait()) {
alert("This page is best viewed in landscape mode");
}
How do I detect the orientation change?
如何检测方向变化？
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
console.log(orientation);
});
});
回答by artnikpro
I think the more stable solution is to use screen instead of window, because it could be both - landscape or portrait if you will resize your browser window on desktop computer.
我认为更稳定的解决方案是使用屏幕而不是窗口，因为如果您要在台式计算机上调整浏览器窗口的大小，它可以是横向或纵向。
if (screen.height > screen.width){
alert("Please use Landscape!");
}
回答by dLindley
In order to apply all of these great comments to my daily coding, for continuity between all my applications, I have decided to use the following in both my jquery and jquery mobile code.
为了将所有这些伟大的评论应用到我的日常编码中，为了我所有应用程序之间的连续性，我决定在我的 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");
}
}
回答by kev666n
Don't try fixed window.orientation queries (0, 90 etc doesn't mean portrait, landscape etc):
不要尝试固定的 window.orientation 查询（0、90 等并不意味着纵向、横向等）：
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
Even on iOS7 depending how you come into the browser 0 isn't always portrait
即使在 iOS7 上，取决于您如何进入浏览器 0 并不总是纵向
回答by Dave Sag
After some experimentation I have found that rotating an orientation aware device will always trigger a browser window's resizeevent. So in your resize handler simply call a function like:
经过一些实验，我发现旋转方向感知设备将始终触发浏览器窗口的resize事件。因此，在您的调整大小处理程序中，只需调用如下函数：
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
回答by ARTniyet
I combined two solutions and it works fine for me.
我结合了两种解决方案，对我来说效果很好。
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(orientation: portrait)").matches) {
alert("PORTRAIT")
}
if (window.matchMedia("(orientation: landscape)").matches) {
alert("LANSCAPE")
}
}, false);
