Joe*_*oey 23 css mobile jquery landscape autorotate
我有一个有移动样式表的网站:
<link rel="stylesheet" href="css/mobile.css" media="handheld">
我也在使用jQuery来检查移动设备并相应地改变功能.
但我想知道是否有办法强制仅横向方向并禁用自动旋转？CSS或jQuery解决方案都可以.
谢谢!
dav*_*ver 17
使用媒体查询来测试方向,在纵向样式表中隐藏所有内容并显示该应用仅适用于横向模式的消息.
<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
我认为是最好的方法
Yoa*_*ann 16
您无法强制在网页中定位,但您可以在portarit模式下建议或阻止内容.
在你的html文件中添加一个div元素
<div id="block_land">Turn your device in landscape mode.</div>
然后调整您的CSS以覆盖您的所有页面
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
然后添加一个litle javascript来检测方向
function testOrientation() {
document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}
不要忘记测试onload和onorientationchange中的方向,也许在你的body标签中
<body onorientationchange="testOrientation();" onload="testOrientation();">
如果此解决方案适合您,请告诉我.
| 归档时间： |
|
| 查看次数： |
74649 次 |
| 最近记录： |