A-A+

手机网页如何禁止手机屏幕横竖切换

2016年05月03日 JavaScript 暂无评论 阅读 9,341 次

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
首先在head中加入如下代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

针对上述viewport标签有如下说明
1)、content中的width指的是虚拟窗口的宽度。

2)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

3)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

5)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

一:CSS判断横屏竖屏

写在同一个CSS中

@media screen and (orientation: portrait) {
  /*竖屏 css*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

分开写在2个CSS中
竖屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏

 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

一:JS判断横屏竖屏

//判断手机横竖屏状态:
window.addEventListener("onorientationchange"inwindow ? "orientationchange": "resize", function() {
        if(window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态!');
        }
        if(window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态!');
        
    }, false);
//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
ps:

移动设备上的页面,当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听:

 

<body onorientationchange="updateOrientation();">

当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:
0 - 竖屏
90 - 逆时针旋转横屏
-90 - 顺时针旋转横屏
180 - 竖屏,上下颠倒

如果你不希望用户使用横屏方式查看你的网页,你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。但是目前很少见到限制用户横屏查看的页面

二:固定

有时候要不要旋转屏幕,是用户的手机设置说了算。建议 viewport 的宽度直接固定吧,旋转了也一样

三:90度翻转外容器

看到国外的解决方式是90度翻转外容器~~~因为jq动画的关系所以就不行了

四:弹窗

没有好办法。因为旋转后浏览器的工具栏位置也会变化,导致页面变窄。所以即使你通过各种手段把内容旋转缩放回来了看起来也会很奇怪。
所以如果想禁用横屏只有弹出一个浮动层提示用户转回来再继续使用。。

ps: jquery moblie    orientationchange 事件

http://www.runoob.com/jquerymobile/event-orientationchange.html

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录