1. 移动端使用CSS或JS判断横屏和竖屏的讲解

     更新时间:2019年03月16日 11:54:16   作者:CODETC   我要评论

    今天小编就为大家分享一篇关于移动端使用CSS或JS判断横屏和竖屏的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

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

    首先在head中加入如下代码:

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

    针对上述viewport标签有如下?#24471;?/strong>

    1)、content中的width指的是虚拟窗口的宽度。

    2)、user-scalable=no就一定可以保证页面不可?#36816;?#25918;吗?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)、手机页面可?#28304;?#25720;移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

    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" rel="external nofollow" >

    横屏

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

    二、JS判断横屏竖屏

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

    最近项目有电子合同方面的开发,需要电子签字,(用的jsignature插件,如果有空以后单独写个使用心得)。在手机小屏幕上签字,全屏横屏才是最好的体验。用户竖屏打开页面时要去签字,提示用户把手机横过来,这样体验太low了,程序员要考虑能用技术解决的就不要去劳烦用户(免得用户烦了回头打电话咬你)。

    先来几个检测屏幕方向的方法:

    //判断屏幕方向
    if(window.orientation==90||window.orientation==-90){
      alert("横屏状态!")
    }
    //监听屏幕方向
    window.onorientationchange = function(){ 
      switch(window.orientation){ 
        case -90: 
        case 90: 
          alert("横屏:" + window.orientation);
        case 0: 
        case 180: 
           alert("竖屏:" + window.orientation);
        break; 
      } 
    } 
    <!--css媒介查询判断-->
    @media (orientation: portrait) { } 横屏
    @media (orientation: landscape) { }竖屏 

    进入网页检测是否横屏状态,不是就给canvas?#21451;?#24335;:

    transform: rotate(90deg);

    最初想的是把jsignature的canvas画布用css3transform横过来就可以了,谁想到,画布横是过来了,touch相关的手势还是竖的(签字啊,笔画不跟手怎么签)。如果是普通项目仅仅是显示的话,上面的方法已经够用了。

    还好这个项目是网页内嵌app中,app有方法强制网页横屏,改了改页面,交上去了。

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

    相关文章

    最新评论

    山东群英会开奖查询
      1. 澳客网官网 足球指数比较 曾道人三期内必出 福彩121期现场开将 生肖时时彩开奖视频 3d3天计划论坛 二分彩怎么玩才能赢钱 北京快三预测推荐号 中国足彩 直播日进斗金顶呱刮 超级大乐透开奖号码 3d组六万能六码 排列三走势图彩吧助手 内蒙古快三一定牛推荐 重庆快乐10分走势图