前段时间公司针对直播服务做了改版升级，APP客户端支持了横屏和竖屏推流/播放。
在这个背景下，虽然触屏未做改动，但本着敏而好学，不断探索的精神，针对如何让web页面强制横屏显示，做了一下试验研究。
首先，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼用户去开启。
这时候用户早就不耐烦的把你的页面关掉了。
我先进行了调研，想看有没有现成的api。实验结果当然是不行。
那么我唯一能想到的解决办法，就是在竖屏模式下，写一个横屏的div，然后把它转过来。
我的测试页面结构如下：
 <body class="webpBack">

 <div id="print">

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

     <p>看我看我，快看我~</p>

 </div>

 </body>

很简单对不对，最终的理想状态是，把文字非常和谐的横过来。
好了来看看区分横屏竖屏的css：

 <style>

         @media screen and (orientation: portrait) {

             html {

                 width: 100%;

                 height: 100%;

                 background-color: white;

                 overflow: hidden;

             }

             body {

                 width: 100%;

                 height: 100%;

                 background-color: red;

                 overflow: hidden;

             }

             #print {

                 position: absolute;

                 background-color: yellow;

             }

         }

         @media screen and (orientation: landscape) {

             html {

                 width: 100%;

                 height: 100%;

                 background-color: white;

             }

             body {

                 width: 100%;

                 height: 100%;

                 background-color: white;

             }

             #print {

                 position: absolute;

                 top:;

                 left:;

                 width: 100%;

                 height: 100%;

                 background-color: yellow;

             }

         }

         #print p {

             margin: auto;

             margin-top: 20px;

             text-align: center;

         }

 </style>

说白了，是要把print这个div在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。

   var width = document.documentElement.clientWidth;

   var height =  document.documentElement.clientHeight;

   if( width < height ){

       console.log(width + " " + height);

       $print =  $('#print');

       $print.width(height);

       $print.height(width);

       $print.css('top',  (height-width)/2 );

       $print.css('left',  0-(height-width)/2 );

       $print.css('transform' , 'rotate(90deg)');

       $print.css('transform-origin' , '50% 50%');

  }

在这里我们先取得了屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把print这个div的宽高设置下，对齐，然后旋转。
最终效果如下：

竖屏

横屏

最后，这么做带来的后果是，如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下:

 var evt = "onorientationchange" in window ? "orientationchange" : "resize";

     window.addEventListener(evt, function() {

         console.log(evt);

         var width = document.documentElement.clientWidth;

          var height =  document.documentElement.clientHeight;

           $print =  $('#print');

          if( width > height ){

             $print.width(width);

             $print.height(height);

             $print.css('top',  0 );

             $print.css('left',  0 );

             $print.css('transform' , 'none');

             $print.css('transform-origin' , '50% 50%');

          }

          else{

             $print.width(height);

             $print.height(width);

             $print.css('top',  (height-width)/2 );

             $print.css('left',  0-(height-width)/2 );

             $print.css('transform' , 'rotate(90deg)');

             $print.css('transform-origin' , '50% 50%');

          }

     }, false);

这样当窗口大小变化和翻转的时候就实现了自动强制横屏~~

作者：旧旧的 <393210556@qq.com> 解决问题的方式，就是解决它一次

移动端web如何让页面强制横屏的更多相关文章

  1. Css实现手机端页面强制横屏的方法示例

    样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen ...

  2. h5移动端页面强制横屏

    说明:这个的原文章来自于https://www.jianshu.com/p/9c3264f4a405  ,我做点点补充  ,谢谢原链接的小姐姐 最近公司是要我做一个h5的小视频,因为是视频接视频,并且 ...

  3. (转)倾力总结40条常见的移动端Web页面问题解决方案

    原文链接:戳这里 1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太 ...

  4. 【转】40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊                  2.图片加载                            3.假如手机网站不用兼容IE浏览器,一般我们会使用zep ...

  5. 移动端Web页面问题(转载)

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  6. 倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  7. 第二篇、倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  8. 移动端Web页面问题

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  9. 移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显 ...

随机推荐

  1. MongoDB集群部署 - 带访问控制的分片副本集

    1. 前言 Ceilometer将meter.event等数据保存在MongoDB中,之前将MongoDB部署在控制节点上,使用三副本模式,时间长了发现meter数据爆炸式增长,区区2T的磁盘捉襟见肘 ...

  2. eclipse中设置JVM内存

    一.   修改jdk 使用内存: 找到eclispe 中window->preferences->Java->Installed JRE ,点击右侧的Edit 按钮,在编辑界面中的 ...

  3. SSRS 报表管理器 http://localhost/Reports HTTP500 内部错误处理过程

    原文地址:http://www.cnblogs.com/zzry/p/5716056.html 安装了很多机器的sqlserverBI 组件 初始安装配置下 浏览报表管理器 http://localh ...

  4. Halcon11 Windows版 下载

    Halcon11 下载地址:http://www.211xun.com/download_page_2.html HALCON 11 是一套机器视觉图像处理库,由一千多个算子以及底层的数据管理核心构成 ...

  5. easyui datagrid 学习 （一）

    注意:当使用谷歌浏览器时!需要 设置style="overflow:hidden",这样则可以去掉滚动条!(该样式添加到layout上!) fit:属性 自动填父容器, borde ...

  6. nginx的进程模型

    nginx采用的也是大部分http服务器的做法,就是master,worker模型,一个master进程管理站个或者多个worker进程,基本的事件处理都是放在woker中,master负责一些全局初 ...

  7. 【转】Using Raycasts and Dynamically Generated Geometry to Create a Line of Sight on Unity3D

    http://www.linkedin.com/pulse/using-raycasts-dynamically-generated-geometry-create-line-thomas José ...

  8. hihoCoder [Offer收割]编程练习赛83 D 生成树问题

    题目 从 Kruskal 算法的角度来思考这个问题. 考虑 $n$ 个点的"空图"(即没有边的图). 先将 $m_2$ 条无权值的边加到图中,得到一个森林. 按边权从小到大的顺序枚 ...

  9. SPOJ COT2 - Count on a tree II（LCA+离散化+树上莫队）

    COT2 - Count on a tree II #tree You are given a tree with N nodes. The tree nodes are numbered from  ...

  10. react输入框输入中文bug

    一般来说,react上我们都会用change事件去处理input的输入,但这样就导致一个问题,在输入中文的时候,我们还没输入完成就会触发change事件,这样显然不是理想状况. 那么,怎么解决这个问题 ...