• 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 奋力谱写新时代追赶超越新篇章——访陕西省委书记胡和平 2019-06-04
  • 香港赛马会原创家畜与野兽:移动端使用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-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 奋力谱写新时代追赶超越新篇章——访陕西省委书记胡和平 2019-06-04
  • 幸运牛仔登陆 山东麻将技巧 卡迪夫城运动场 重庆时时彩2期必中计划 征服者入侵免费试玩 极速十一选五走势图表 蒙彼利埃高的商学院 卡昂沙发淘宝 北京快3计划 K歌乐韵APP