• 五万球迷助阵 国安主场“摘花” 2019-05-24
  • 俄罗斯驻华大使:未来上合的首要任务是加强区域一体化 2019-05-23
  • 习近平总书记重要讲话在内蒙古各界引发热烈反响 2019-05-22
  • 女性之声——全国妇联 2019-05-21
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-21
  • 好朋友、和平奖可能人家抱了。 2019-05-20
  • 【北京荣祥月达车型报价】北京荣祥月达综合店车型价格 2019-05-20
  • 脸上长痘代表对应内脏有问题?专家:未发现相关性 2019-05-19
  • 和静县首届东归节6月23日开幕 2019-05-18
  • 太空监视飞行器相关新闻 2019-05-18
  • 警车化身“产房” 冰雪路上“生命接力” 2019-05-17
  • 百部网络正能量动漫音视频作品评选 2019-05-16
  • 初二少年与家长争吵离家出走 客运站人员发觉异样后拦下 2019-05-15
  • 陈海滢的专栏作者中国国家地理网 2019-05-14
  • 乐平市:开展流动党校“培训在基层”活动(图) 2019-05-13
  • 香港赛马会娱乐城能赚钱吗:移动端使用CSS或JS判断横屏和竖屏的讲解

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw  更新时间: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标签有如下说明

    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" 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加样式:

    transform: rotate(90deg);

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

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

    总结

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

    相关文章

    最新评论

  • 五万球迷助阵 国安主场“摘花” 2019-05-24
  • 俄罗斯驻华大使:未来上合的首要任务是加强区域一体化 2019-05-23
  • 习近平总书记重要讲话在内蒙古各界引发热烈反响 2019-05-22
  • 女性之声——全国妇联 2019-05-21
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-21
  • 好朋友、和平奖可能人家抱了。 2019-05-20
  • 【北京荣祥月达车型报价】北京荣祥月达综合店车型价格 2019-05-20
  • 脸上长痘代表对应内脏有问题?专家:未发现相关性 2019-05-19
  • 和静县首届东归节6月23日开幕 2019-05-18
  • 太空监视飞行器相关新闻 2019-05-18
  • 警车化身“产房” 冰雪路上“生命接力” 2019-05-17
  • 百部网络正能量动漫音视频作品评选 2019-05-16
  • 初二少年与家长争吵离家出走 客运站人员发觉异样后拦下 2019-05-15
  • 陈海滢的专栏作者中国国家地理网 2019-05-14
  • 乐平市:开展流动党校“培训在基层”活动(图) 2019-05-13