前段时间公司针对直播服务做了改版升级，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. Codeforces Round #461 (Div. 2) A. Cloning Toys

    A. Cloning Toys time limit per test 1 second memory limit per test 256 megabytes Problem Description ...

  2. #3 working with data stored in files && securing your application (PART II)

    Security problems is more and more important on the internet today. You can see the problems . This ...

  3. Redis实现之数据库（三）

    过期键删除策略 在Redis实现之数据库(二)一小节中,我们知道了数据库键的过期时间都保存在过期字典中,又知道了如果根据过期时间去判断一个键是否过期,现在剩下的问题是:如果一个键过期了,那么它什么时候 ...

  4. Python中函数参数类型和参数绑定

    参数类型 Python函数的参数类型一共有五种,分别是: POSITIONAL_OR_KEYWORD(位置参数或关键字参数) VAR_POSITIONAL(可变参数) KEYWORD_ONLY(关键字 ...

  5. linux学习(一) -- ubuntu下lamp环境的配置

    以下为实测教程,希望能为大家提供帮助,转载请注明出处 ubuntu+apache+mysql+php7 第一.更换apt的源 1.复制原文件备份 sudo cp /etc/apt/source.lis ...

  6. RESTful-rest_framework版本控制、分页器-第六篇

     版本控制: 源码位置分析第一步: 源码位置分析第二步:在APIView-despath方法-initial-determine_version #执行determine_version,返回两个值, ...

  7. 微信小程序--问题汇总及详解之form表单

    附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...

  8. 服务器和客户端Socket单向通信例子

    看了两天socket通信,也参考了网上其他人是怎么写的. 下面我把最简单的socket例程贴出来 server代码: public class Server { private static int ...

  9. 并查集：按秩合并 $n$ 个点所得树高不超过 $\lfloor\log n \rfloor$

    用 $h_n$ 表示按秩合并 $n$ 个点所得树的最大高度. 有 $h_1 = 0, h_2 = 1, h_3 = 1, h_4 = 2, h_5 = 2, \dots$ 有如下地推: \[ h_n ...

  10. [USACO12Jan][luogu3041] Video Game Combos [AC自动机+dp]

    题面 传送门 思路 首先,有一个非常显然的思路就是dp: 设$dp[i][j]$表示前i个字符,最后一个为j 然后发现这个东西有后效性 改!设$dp[i][j]$代表前i个字符,最后15个的状态为j( ...