说明:这个的原文章来自于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. vue的基础概念和语法01

    vue的特点和web开发中的常见高级功能 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 数据响应式 不是所有元素操作都Vue都会监听并实现数据响应式 //push方法:追加 thi ...

  2. Java 生态圈知识汇总

    原文地址:github.com/aalansehaiy… 前言 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.其实不然,笔者虽是计算机专业出身,但工作年限并不长,对于技术这碗饭有一些 ...

  3. yolov3和ssd的区别

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/BlowfishKing/article/d ...

  4. 好久没玩laravel了，今天玩下Laravel项目迁移步骤

    .在新的目录中克隆git远程版本库 .执行composer install安装依赖 .执行php artisan key:generate生成key 好久没玩laravel了,今天玩下Laravel项 ...

  5. 在.net 程序中使用Mustache模板字符串

    今天弄了一个配置随着使用环境动态切换的功能,一个基本的思路是: 将配置配置为模板的形式, 根据不同的环境定义环境变量 根据环境变量渲染模板,生成具体的配置 这里面就涉及到了一个字符串模板的功能,关于模 ...

  6. ASP.NET Core快速入门--学习笔记系列文章索引目录

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 抓住国庆假期的尾巴完成了此系列课程的学习笔记输出! ASP.NET Core快 ...

  7. json字符串转为php数组，使用随机字符串生成订单号（学生笔记）

    //提交订单 function add_order(){ session_start(); // var_dump($_SESSION); // die(); // session_destroy() ...

  8. RESTFul&HTTP GET简介

    RestApi:https://www.cnblogs.com/springyangwc/archive/2012/01/18/2325784.html RESTFul API设计指南:http:// ...

  9. printf打印字节调试

    void print(BYTE *data, INT len) { INT x = 0; INT y = 0; if(data == NULL) { return; } for(x = 0; x &l ...

  10. Python目录和文件处理总结

    1.判断目录是否存在.判断文件是否存在.创建目录.重命名目录或文件 import os #获取当前目录路径: E:\Work\Projects\python print(os.getcwd()) #判 ...