说明:这个的原文章来自于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移动端页面强制横屏的更多相关文章

  1. 移动端web如何让页面强制横屏

    前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...

  2. 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 ...

  3. 用css3解决移动端页面自适应横屏竖屏的思考

    之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时 ...

  4. 浅谈h5移动端页面的适配问题

    一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其 ...

  5. h5移动端页面meta标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  6. H5移动端页面设计心得分享

    去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有 ...

  7. H5移动端页面设计心得分享(转载)

    去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有 ...

  8. 常见的H5移动端Web页面Bug问题解决方案总汇

    解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...

  9. css3 移动端页面全屏旋转，横屏显示。

    css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...

随机推荐

  1. 使用composer安装Larave提示“Changed current directory to C:/Users/Administrator/AppData/Roaming/Composer”

    解决办法: 根据官方手册执行composer global require "laravel/installer" 显示Changed current directory to C ...

  2. CSP2019 树上的数 题解

    题面 这是一道典型的部分分启发正解的题. 所以我们先来看两个部分分. Part 1 菊花图 这应该是除了暴力以外最好想的一档部分分了. 如上图(节点上的数字已省略),如果我们依次删去边(2)(1)(3 ...

  3. vscode源码分析【九】窗口里的主要元素

    第一篇: vscode源码分析[一]从源码运行vscode 第二篇:vscode源码分析[二]程序的启动逻辑,第一个窗口是如何创建的 第三篇:vscode源码分析[三]程序的启动逻辑,性能问题的追踪 ...

  4. 一个python问题引发的思考

    问题: pyqt5下开发的时候,遇到了一个这样的问题.Traceback (most recent call last):File “test.py”, line 3, in from PyQt5.Q ...

  5. Java 泛型示例 - 泛型方法，类，接口

    Java Genrics 是 Java 5 中引入的最重要的功能之一. 如果您一直在使用Java Collections并使用版本 5 或更高版本,那么我确定您已经使用过它. Java 中具有集合类的 ...

  6. swoole中使用task进程异步的处理耗时任务

    我们知道,swoole中有两大进程,分别是 master 主进程和 manager 管理进程. 其中 master 主进程中会有一个主 reactor 线程和多个 reactor 线程,主要的作用就是 ...

  7. Annotation-specified bean name 'userDaoImpl' for bean class [***] conflicts with existing, non-compatible bean definition of same name and class [***]

    使用Spring开发的时候报错如下: Caused by: org.springframework.context.annotation.ConflictingBeanDefinitionExcept ...

  8. 关于EFCore线程内唯一

    EntityFramework的线程内唯一 EntityFramework的线程内唯一是通过httpcontext来实现的 public static DbContext DbContext() { ...

  9. Python爬取十四万条书籍信息告诉你哪本网络小说更好看

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: TM0831 PS:如有需要Python学习资料的小伙伴可以加点击 ...

  10. [转]Eclipse插件开发之基础篇(4) OSGi框架

    原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/18/eclipse_plugin_1_2_1.html 1. 什么是OSGi框架 OSGi(O ...