前段时间公司针对直播服务做了改版升级，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. centos7.3网络配置

    一.关闭NetworkManager 默认状态下最小化安装使用NetworkManager这个服务来控制联网的,但是这个配置在配置生产环境服务器时一般不会使用,而是使用系统自带的network服务,更 ...

  2. MAX（数论）

    Description 小C有n个区间,其中第i个区间为[li,ri],小C想从每个区间中各选出一个整数,使得所有选出的数and起来得到的结果最大,请你求出这个值. Input Format 第一行一 ...

  3. [bzoj1912]异象石(set)

    Description Adera是Microsoft应用商店中的一款解谜游戏. 异象石是进入Adera中异时空的引导物,在Adera的异时空中有一张地图.这张地图上有N个点,有N-1条双向边把它们连 ...

  4. sql优化系列2

    sql中索引是否会用到,进而影响查询效率. 带通配符(%)的like语句 1.不能用null作索引,任何包含null值的列都将不会被包含在索引中.即使索引有多列这样的情况下,只要这些列中有一列含有nu ...

  5. Python及其常用模块库下载及安装

    一.Python下载:https://www.python.org/downloads/ 二.Python模块下载:http://www.lfd.uci.edu/~gohlke/pythonlibs/ ...

  6. 2 Model层-模型成员

    1 类的属性 objects:是Manager类型的对象,用于与数据库进行交互 当定义模型类时没有指定管理器,则Django会为模型类提供一个名为objects的管理器 支持明确指定模型类的管理器 c ...

  7. Logistic回归python实现小样例

    假设现在有一些点,我们用一条直线对这些点进行拟合(该线称为最佳拟合直线),这个拟合过程就称作回归.利用Logistic回归进行分类的主要思想是:根据现有数据对分类边界线建立回归公式,依次进行分类.Lo ...

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

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

  9. SXCPC2018 nucoj2007 和Mengjiji一起攻克难关

    problem #include <algorithm> #include <iostream> #include <cstdio> using namespace ...

  10. python 学习分享-常用模块篇

    模块 就是前人给你造的轮子,你开车就好!!! 常用模块有: time模块 random模块 os模块 sys模块 shutil模块 json  &  picle模块 shelve模块 xml处 ...