h5移动端页面强制横屏

说明:这个的原文章来自于https://www.jianshu.com/p/9c3264f4a405 ,我做点点补充 ,谢谢原链接的小姐姐

最近公司是要我做一个h5的小视频,因为是视频接视频,并且源文件就是横屏的,所以要求点击网址一进入就是横屏的状态。。。。。

<body style="margin: 0px;height: 100%;padding: 0;" class="webpBack">

    <span  id="print" >

      <span id="changeIt">

         啦啦啦

      </span>

    </span>

</body>

下面的代码要注意啦~~~~注意点:因为你在自己的代码上去套这个样式,你可以在竖屏的情况下设一个颜色 ,横屏的时候设另外一个颜色,在这两种状态下去调css,还有我当初习惯了写行内样式,半天出不来~~~~所以最好用class。。。。

    /* 竖屏 */

     @media screen and (orientation: portrait) {

        html{

           width : 100% ;

           height : 100% ;

            overflow : hidden;

            /* background-color:yellow; */

        }

        body{

            width : 100% ;

           height : 100% ;

          overflow : hidden;

        }

        #print{

           position : absolute ;

        }

        .enterDiv{

            height: 100%;

            width: 100%;

            position: relative;

            left: 0;

        }

   }

   /* 横屏 */

   @media screen and (orientation: landscape) {

          html{

             width : 100% ;

             height : 100% ;

             /* background-color:red; */

          }

           body{

              width : 100% ;

             height : 100% ;

          }

          #print{

            position : absolute ;

            top : 0 ;

            left : 0 ;

            width : 100% ;

            height : 100% ;

         }

        .backgroundEnter{

            width: 100%;

            position: absolute;

            top: 0;

            left: 0;

        }

    }

    #print span{

      margin: auto ;

      margin-top : 20px ;

      text-align: center;

    }

　横屏的js

下面要注意的是:刚开始我的苹果6s打死都不起作用,但是别人的6s可以,大部分的安卓机起作用,我的6s出现的状况是第一次竖屏是正常的,进入横屏状态也是正常的，当我回来到竖屏的时候,就不行了,为什么?下面的if-else的判断，else里面死都进不去,我都想重写全部的css了,我也怀疑过是不是document.documentElement.clientWidth;是不是不适合去获取宽高,并不是,而是在转屏的时候,手机需要切换结束后获取到的宽高才是正确的,所以监听的里面我们做一个0.5秒的延迟就可以了 ........

<script>

    // 试试横屏

    let width = document.documentElement.clientWidth;

    let 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%');

    }

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

    console.log(evt, 'evt')

    window.addEventListener(evt, function() {

        // window.localtion.reload();

       setTimeout(function(){

        var width =document.documentElement.clientWidth;

        var height = document.documentElement.clientHeight;

        $print = $('#print');

        $videoIntroduce=$('#videoIntroduce')

        $toVideoBack=$('#toVideoBack')

        $backgroundImg=$('.backgroundImg')

        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%'); } }, 500) }, false);

　之前有看到评论说做延迟,但是不知道出现什么样的情况去做,也不知道为什么,错过就知道了

h5移动端页面强制横屏的更多相关文章

移动端web如何让页面强制横屏
前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...
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 ...
用css3解决移动端页面自适应横屏竖屏的思考
之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会这里举的样例还是平时 ...
浅谈h5移动端页面的适配问题
一.前言昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其 ...
h5移动端页面meta标签
<!DOCTYPE html>  <html lang="zh-cmn-Hans"&g ...
H5移动端页面设计心得分享
去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有 ...
H5移动端页面设计心得分享(转载)
去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有 ...
常见的H5移动端Web页面Bug问题解决方案总汇
解决jquery ajax调用远程接口的跨域问题首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...
css3 移动端页面全屏旋转，横屏显示。
css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...

随机推荐

Python开发GUI实战：图片转换素描画工具！
奋斗没有终点好好学习72变,因为将来没有人能替你阻挡81难 . 生如蝼蚁,当有鸿鹄之志: 命如纸薄,应有不屈之心 . 今天被这句话触动了,所以开篇分享给大家.鸡汤有毒,但有时大家却靠它激励自己 ...
CCF模拟试题——最大的矩形 Java
我们先看一下题目: 问题描述试题编号: 201312-3 试题名称: 最大的矩形时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述在横轴上放了n个相邻 ...
MySQL GROUP BY 的问题
拿 employee 示例数据库为例,当进行如下操作时会报错. mysql> SELECT * FROM employees GROUP BY gender; ERROR 1055 (42000 ...
c#中list集合使用Max()方法查找到最大值
在C#的List集合操作中,有时候需要查找到List集合中的最大值,此时可以使用List集合的扩展方法Max方法,Max方法有2种形式,一种是不带任何参数的形式,适用于一些值类型变量的List集合,另 ...
python处理oracle数据库的返回数据
上代码: import SqlHelper.ORACLE as ORA import pandas as pd if __name__ == '__main__': #连接数据库 ms = ORA.O ...
ASP.NET MVC IOC 之 Autofac（一）
新建一个MVC项目,如 AutoFacTest,引用autofac,如下图: 接下来就是开始进行编程了首先,新建一个类库,名为 AutoFacTest.Service,该类库编写服务层代码,我们的接 ...
Java自定义注解（1）
Java注解简介 1. Java注解(Annotation) Java注解是附加在代码中的一些元信息,用于一些工具在编译. 运行时进行解析和使用,起到说明.配置的功能. 注解相关类都包含在java.l ...
PlayJava Day005
今日所学: /* 2019.08.19开始学习,此为补档. */ 类:一类事物的抽象体(如全人类,学生类,订单类) 对象:具体的个体(如张三,某个外卖订单) 对象具有属性和行为. 声明的属性语句一般放 ...
仅用StoryBoard布局实现按钮的均匀分布
今天在做登录界面时设计的需求是,登录和取消按钮左右对称均匀分布,按钮大小不变如图屏幕宽度变化时按钮宽度不变,三个间距相等并且随屏幕变化而变化,简单的说就是按钮均匀分布,在网上查了一些资料,弄得比较乱 ...
剑指offer 18：树的子结构
题目描述输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 解题思路验证B是不是A的子树,直觉做法,按照任意次序遍历A树,一旦出现和B树根节点相同的子节点, ...

h5移动端页面强制横屏

h5移动端页面强制横屏的更多相关文章

随机推荐

热门专题