<分区>
要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
关闭 9 年前。
<分区>
要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
关闭 9 年前。
我正在构建一个非常简单的页面，只能在手机上查看。该页面的目的纯粹是提示人们以横向模式握住手机。
我希望能够做的是使用媒体查询或类似的东西来检测设备的方向。如果用户纵向拿着手机，我希望他们看到一条消息和一张图片，要求他们横向拿着手机。一旦他们将手机旋转到横向模式，屏幕上就会出现一个链接供他们点击。就是这么简单 - 但不幸的是，我只能找到根据设备方向更改样式表的代码，但没有任何东西可以让我真正更改页面的主体。谁能帮忙？
谢谢!
最佳答案
通过 Javascript，您可以使用全局属性“window.orientation”
当用户转动手机时，将执行事件“orientationchange”。例如你可以这样处理这个事件:
$('body').bind('orientationchange', function(e) {
alert("Smartphone was turned");
});
通过几行 Javascript 和 CSS，您可以向非横向用户展示不同的内容:
检查方向函数:
jQuery(function($) {
$('body').bind('orientationchange', function(e) {
check_orientation();
});
check_orientation();
});
因此该函数检查手机是否以“正确的方式”握住并显示/隐藏内容:
var check_orientation = function() {
if(typeof window.orientation == 'undefined') {
//not a mobile
return true;
}
if(Math.abs(window.orientation) == 90) {
//portraitmode
$('#landscape').fadeOut();
return true;
}
else {
//landscape mode
$('#landscape').fadeIn().bind('touchstart', function(e) {
e.preventDefault();
});
return false;
}
};
你的 content-div 的标签:
<div id="landscape">Bitte drehen Sie Ihr Gerät!</div>
和你的 css-entry:
#landscape {
display:none;
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
background:rgba(0,0,0,0.75);
z-index:1999;
}
关于android - 我可以根据设备方向更改页面的 html 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19404432/