说明:这个的原文章来自于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. Ant默认配置文件不是build.xml该如何编写命令进行编译打包

    Ant的构件文件是基于XML编写的,默认名称为build.xml. ant命令默认寻找build.xml文件.若文件名为hello.xml时,读者还需要对命令做少许改变, 改为:ant –f hell ...

  2. webpack入门配置步骤详解

    1.初始化 1.npm install webpack webpack-cli webpack-dev-server --g 全局安装必要的第三方插件 2.mkdir config dist src ...

  3. rpmrebuild 下载安装

    下载 https://jaist.dl.sourceforge.net/project/rpmrebuild/rpmrebuild/2.14/rpmrebuild-2.14.tar.gz 安装 将其做 ...

  4. Spring MVC整合FreeMarker

    什么是Freemarker?    FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或 ...

  5. PHP TP框架自定义打印函数P

    效果如下,有个灰色背景,也不一定是灰色可以改 代码: //传递数据以易于阅读的样式格式化后输出function p($data){ // 定义样式 $str='<pre style=" ...

  6. 简单探讨一下.NET Core 3.0使用AspectCore的新姿势

    前言 这几天在对EasyCaching做支持.net core 3.0的调整.期间遇到下面这个错误. System.NotSupportedException:"ConfigureServi ...

  7. oracle 关联更新

    不多说了,我们来做实验吧. 创建如下表数据 select * from t1 ; select * from t2; 现需求:参照T2表,修改T1表,修改条件为两表的fname列内容一致. 方式1,u ...

  8. tensorflow查看使用的是cpu还是gpu

    https://stackoverflow.com/questions/38009682/how-to-tell-if-tensorflow-is-using-gpu-acceleration-fro ...

  9. Java学习笔记 jar包获取当前路径

    情况 使用一个jar包,需要下载一个文件到与当前jar包同目录,如何去获取此目录? 代码 使用.即可作为当前的目录 windows环境下,我的jar包所在的目录为D:\test val dir = F ...

  10. XAF-在代码中实现属性值验证（EF）

    This lesson explains how to set rules for business classes and their properties. These rules are val ...