• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > 网页在手机端如何强制横屏展示?

    网页在手机端如何强制横屏展示?

    作者: 分类:JS应用 点击: 857 次
    wordpress CMS主题:ssmay主题

      在开发网页时,一般情况网页都是在手机端竖屏显示的,只有把手机横过来才会横屏显示(需要开启手机旋转功能)。而我们有时需要强制把网页在手机端横屏显示,如:游戏、视频播放等,也就是说,在手机竖屏时,我们要将这些网页在手机上横屏展示出来,如下图:

      网页在手机端如何强制横屏展示?

      如果想让一个普通网页在手机竖屏的情况,横屏显示,就需要通过代码来实现了。我们只需判断手机当前是否竖屏,如果是竖屏,就旋转网页让网页横屏显示,如果是横屏就不旋转网页。如何判断手机是否竖屏呢?

      思路有2个:

      1:通过判断手机屏幕宽度来判断手机是否竖屏;

      2:通过判断手机旋转的角度来判断手机是否竖屏;

      下面,就简单介绍一个小案例:

      网页HTML代码:

      <div class="lingan_1" id="lingan_1">
      <img src="img/1.jpg" width=100% height=400px>
      </div>

      为人让lingan_1元素能旋转,我们必须为它设置绝对定位,CSS代码如下:

      .lingan_1 {  position: absolute; top: 0; left: 0; width: 90%; height: 100%;  }

      通过JS代码来实现网页在手机竖屏情况下的横屏展示:

      //JS代码来判断:屏幕宽度 < 屏幕高度时,即竖屏,就让页面.lingan_1元素横屏显示
      const width = document.documentElement.clientWidth; //获取当前手机屏宽
      const height = document.documentElement.clientHeight; //手机褡高
      if (width < height) { //如果宽小于高,就是代表竖屏
      const contentDOM = document.getElementById('lingan_1'); //获取lingan_1元素
      contentDOM.style.width = height + 'px';  //设置该元素的宽等于屏高
      contentDOM.style.height = width + 'px'; //设置该元素的高等于屏宽
      contentDOM.style.top = (height - width) / 2 + 'px';
      contentDOM.style.left = 0 - (height - width) / 2 + 'px';
      contentDOM.style.transform = 'rotate(90deg)'; //让该元素旋转90度,使其横屏展示
      }

      通过上面这段代码,就已经实现了在手机竖屏时横屏显示。

      这样还没完,因为页面已经横屏展示了,所以,我们要把手机横过来才能正常浏览网页。这时,如果手机没有开启“自动旋转”功能,我们可以正常浏览横屏网页。但如果我们开启了“自动旋转”功能,那就悲催喽,页面可能会再次旋转,因为,当我们旋转手机时,页面没有进行刷新,所以,JS获取到的屏宽依然是竖屏时的屏宽。

      所以,我们还要限制手机的“自动旋转”,当然,JS代码没有办法来限制手机内在的功能,我们只能通过判断是否横屏或竖屏来实现页面是否旋转。这时,我们就要用到上面所提到手2个思路了。

      方法1:判断屏宽度是否小于屏高:

      //如果手机设置了自动旋转,还要以下代码来限制自动旋转,否则就悲催了
      const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //onorientationchange是Html5的一个屏幕旋转事件
      window.addEventListener(evt, function () { //当触发了屏幕旋转事件时
      const width = document.documentElement.clientWidth; //屏宽
      const height = document.documentElement.clientHeight; //屏高
      const contentDOM = document.getElementById('lingan_1'); //获取元素
      if (width > height) { // 横屏
      contentDOM.style.width = width + 'px';
      contentDOM.style.height = height + 'px';
      contentDOM.style.top = '0px';
      contentDOM.style.left = '0px';
      contentDOM.style.transform = 'none'; //当机横屏时,不旋转
      }else {
      //alert('change to portrait')
      contentDOM.style.width = height + 'px';
      contentDOM.style.height = width + 'px';
      contentDOM.style.top = (height - width) / 2 + 'px';
      contentDOM.style.left = 0 - (height - width) / 2 + 'px';
      contentDOM.style.transform = 'rotate(90deg)'; //竖屏时旋转90度
      }

      }, false);

      经测试,这种方式在苹果手机上能正常实现我们想要的效果,即竖屏时页面横屏展示,手机横屏时不发生旋转。但是在安卓手机就悲催了,居然实现不了我们想要的效果。所以,这种方案果断放弃,也许是因为手机发生旋转时,JS获取到的屏宽依然是竖屏时的屏宽。

      方法2:通过判断旋转角度来判断是否竖屏或横屏

      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      var screen_width = width; //屏幕宽度
      if (width < height) {
      screen_width = height; //如果 是竖屏,灵感的宽度就等于屏高
      const contentDOM = document.getElementById('lin_list_1');
      contentDOM.style.width = height + 'px';
      contentDOM.style.height = width + 'px';
      contentDOM.style.top = (height - width) / 2 + 'px';
      contentDOM.style.left = 0 - (height - width) / 2 + 'px';
      contentDOM.style.transform = 'rotate(90deg)';
      }

      //根据手机旋转的角度来判断
      const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //旋转事件
      window.addEventListener(evt, function () { //事件监听
      if (window.orientation === 90 || window.orientation === -90) { //旋转到 90 或 -90 度,即竖屏到横屏
      screen_width = height; //横屏,灵感的宽度就等于屏高
      contentDOM.style.width = height + 'px';
      contentDOM.style.height = width + 'px';
      contentDOM.style.top = '0px';
      contentDOM.style.left = '0px';
      contentDOM.style.transform = 'none'; //不旋转;
      }else{ //旋转到 180 或 0 度,即横屏到竖屏
      screen_width = height; //竖屏,灵感的宽度就等于屏高
      contentDOM.style.width = height + 'px';
      contentDOM.style.height = width + 'px';
      contentDOM.style.top = (height - width) / 2 + 'px';
      contentDOM.style.left = 0 - (height - width) / 2 + 'px';
      contentDOM.style.transform = 'rotate(90deg)'; //旋转90度
      }
      }, false);

      方法2中,我们通过旋转角度来判断,而不需要考虑旋转后屏幕的宽度。如果只是旋转了90度或-90度,就是竖屏,我们就设置页面旋转90度;如果手机旋转180度或0度,就不旋转页面。经测试,在苹果手机和安卓手机上,都能实现我们想要的效果。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201805215585.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.