我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它，如果是的话，显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看，则不会出现任何消息。
所以基本上，我想让网站检测视口的方向，如果方向是纵向，然后显示一个警告消息，建议用户这个页面最好在横向模式下查看。
当前回答
有一种方法可以检测用户是否使用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将被触发，当用户使用纵向模式时，警报将弹出。
其他回答
CCS只
@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
body:after{
position: absolute;
z-index: 9999;
width: 100%;
top: 0;
bottom: 0;
content: "";
background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
background-size: 100% auto;
opacity: 0.95;
}
}
在某些情况下，你可能想要添加一小段代码，以便在访问者旋转设备后重新加载到页面，这样CSS就能正确呈现:
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
case 90:
case -90: window.location.reload();
break; }
};
经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
这是对之前答案的扩展。我发现的最好的解决方案是创建一个无害的CSS属性，它只在满足CSS3媒体查询时出现，然后用JS测试该属性。
例如，在CSS中你会有:
@media screen only and (orientation:landscape)
{
// Some innocuous rule here
body
{
background-color: #fffffe;
}
}
@media screen only and (orientation:portrait)
{
// Some innocuous rule here
body
{
background-color: #fffeff;
}
}
然后转到JavaScript(我使用jQuery是为了好玩)。颜色声明可能很奇怪，所以您可能想使用其他方法，但这是我发现的最简单的测试方法。然后，您可以使用resize事件来进行切换。把它们放在一起:
function detectOrientation(){
// Referencing the CSS rules here.
// Change your attributes and values to match what you have set up.
var bodyColor = $("body").css("background-color");
if (bodyColor == "#fffffe") {
return "landscape";
} else
if (bodyColor == "#fffeff") {
return "portrait";
}
}
$(document).ready(function(){
var orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
$(document).resize(function(){
orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
});
});
最好的部分是，在我写这个答案的时候，它似乎对桌面界面没有任何影响，因为它们(通常)没有(似乎)向页面传递任何朝向参数。
大卫·沃尔什的方法更好，更切中要害。
// 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
这就是我用的。
function getOrientation() {
// if window.orientation is available...
if( window.orientation && typeof window.orientation === 'number' ) {
// ... and if the absolute value of orientation is 90...
if( Math.abs( window.orientation ) == 90 ) {
// ... then it's landscape
return 'landscape';
} else {
// ... otherwise it's portrait
return 'portrait';
}
} else {
return false; // window.orientation not available
}
}
实现
window.addEventListener("orientationchange", function() {
// if orientation is landscape...
if( getOrientation() === 'landscape' ) {
// ...do your thing
}
}, false);
