我的移动端网页如果默认正常打开竖着看图片很小,但是如果打开重力感应器横着看效果就会好很多,请问用js或者其他可以控制移动端网页默认是横着的吗?谢谢。
一般看到的实现是这样的:
假设希望页面在横屏下显示
那么页面打开时,通过
orientation
来判断屏幕是横着还是竖着判断如果是横屏,则显示页面;如果不是横屏,则不显示页面内容,而是显示一个提示“请在横屏下浏览此页面”
好像比较难,涉及到调用安卓或iOS的API了应该。
下面这个方法可以判断是横屏还是竖屏,但是似乎并不能强制更改window.orientation的值来实现旋转屏幕。
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
alert('竖屏');
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
alert('横屏');
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
$(function(){
orient();
});
如果页面元素比较简单的话,或许可以尝试使用CSS3旋转90度来实现伪横屏,不过一般效果都不大好。
body{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}