前段时间公司针对直播服务做了改版升级，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. HDU 3966 Aragorn's Story 树链拋分

    一.写在前面 终于开始开坑link-cut-tree这个了,对于网上找到的大佬的前进路线,进行了一番研发,发现实际上可以实现对于树链拋分的制作.经历了若干长时间之后终于打了出来(为什么每次学什么东西都 ...

  2. Python登录人人网并抓取新鲜事

    from sgmllib import SGMLParser import sys,urllib2,urllib,cookielib class spider(SGMLParser):     def ...

  3. 线程、进程、队列、IO多路模型

    操作系统工作原理介绍.线程.进程演化史.特点.区别.互斥锁.信号.事件.join.GIL.进程间通信.管道.队列.生产者消息者模型.异步模型.IO多路复用模型.select\poll\epoll 高性 ...

  4. Eclipse主题更换方法

    1.打开Eclipse的Help->Eclipse Marketplace 2.在Find里搜索Eclipse Color Theme,点击Install按钮 3.打开Window->Pr ...

  5. nable to execute dex: Multiple dex files define Lcom/chinaCEB/cebActivity/R

    用proguaid 只混淆Android项目的src下的包的话,如果出现了上面的问题: nable to execute dex: Multiple dex files define Lcom/chi ...

  6. mysql sum聚合函数和if()函授的联合使用

    今天去面试遇到一个数据库试题,首先说一下表结构如下: 表结构:mytest 表数据:mytest 要查询的结果如下: 在本题目中,需要用到sum聚合函数和if函数 sql如下: ,)) ,)) AS ...

  7. app分享代码

    友推是一款是面向移动应用的SDK分享组件,提供给开发者集成使用.通过友推,开发者可以轻松集成社会化分享功能,同时创建及管理推荐好友使用您应用的推荐奖励活动,用户推荐好友安装使用您的应用即可获得推荐奖励 ...

  8. 【SCOI 2010】股票交易

    题目 最近 \(\text{lxhgww}\) 又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,\(\text{lxhgww}\) 预测到了未来 \(T ...

  9. 第1章 HTML基础

    1.1 HTML概述 1.1.1 什么是HTML HTML(Hyper Text Markup Language,超 文本 标记 语言)是纯文本类型的语言,它是Internet上用于编写网页的主要语言 ...

  10. 正则表达式re模块的详解-python

    1.元字符([ ]),它用来指定一个character class.所谓character classes就是你想要匹配的字符(character)的集合.字符(character)可以单个的列出,也 ...