前段时间公司针对直播服务做了改版升级，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. Retrofit 入门和提高

    首先感谢这个哥们,把我从helloworld教会了. http://blog.csdn.net/angcyo/article/details/50351247 retrofit 我花了两天的时间才学会 ...

  2. Android 自定义debug.keystore

    场景分析: 有时候,我们要使用第三方的服务,需要提供自己的包名以及keystore的sha1值,比如微信支付,百度地图,都需要包名和keystore的sha1值作为唯一标识.这时候我们测试的时候,如果 ...

  3. oracle 迭代查询

    Oracle 迭代查询, 以后台菜单作为示例 这是要准备的sql create table tbl_menu( id number primary key, parent_id , name ) no ...

  4. CSU-2049 象棋

    CSU-2049 象棋 Description 車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車--他想知道,在一共N×M个点的矩形棋盘中摆最多 ...

  5. 我爱学 Python 之文件

    读取文件 假设你已经在某个文件夹下创建了 "test.txt" 文件,且里面有一些内容,那你在当前位置输入 Python3,进入到交互模式,然后执行下面的操作: >>& ...

  6. Goole Search Auto Complete

    这个项目就九章算法大数据课程的一个项目.主要分为两步: 第一步是 offline 建立 数据库 我们用两个map reduce 的data pipline 来实现. 第二步是 online显示把数据里 ...

  7. 在同一个sql语句中如何写不同条件的count数量 (转)

    end) end)"描述名称2" from 表名 t

  8. redis命令monitor详解

    通过monitor这个命令可以查看数据库在当前做了什么操作,对于管理redis数据库有这很大的帮助 如图示,在redis客户端进行操作显示info,另一个窗口打开monitor就会显示出这个命令的操作 ...

  9. C++ bitset类的使用与简介

    有些程序要处理二进制位的有序集,每个位可能包含的是0(关)或1(开)的值.位是用来保存一组项或条件的yes/no信息(有时也称标志)的简洁方法.标准库提供了bitset类使得处理位集合更容易一些.要使 ...

  10. Web进程被kill掉后线程还在运行怎么办？

    目录 背景描述 原因分析 处理方案 参考 背景描述 系统有一个配置表,系统在启动后会启动一个线程,每隔5分钟将配置表里所有的数据更新到内存中. 系统是通过jenkins构建(直接kill掉Web进程, ...