说明:这个的原文章来自于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. celery生产者-消费者

    Celery是一个简单,灵活,可靠的分布式系统,用于处理大量消息,同时为操作提供维护此类系统所需的工具. 它是一个任务队列,专注于实时处理,同时还支持任务调度. celery解决了什么问题: 示例一: ...

  2. Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'infor

    今天在Navicat上执行SQL增删改查数据操作的时候出现了下面这个问题 Expression #1 of ORDER BY clause is not in GROUP BY clause and ...

  3. Tkinter最佳实践（半小时）

    概述: 简介 Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.Tk和Tkinter可以在大多数的Unix平台下使用,同样可以应用在Windows和 ...

  4. vue动画实现方式

    vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  5. C#截图操作（几种截图方法）

    公共函数获取屏幕截图private Bitmap GetScreenCapture(){ Rectangle tScreenRect = new Rectangle(0, 0, Screen.Prim ...

  6. 使用 Powershell 远程连接 windows server

    使用 Powershell 远程连接 windows server Intro 最近我们的开发环境增加了一个 windows 服务器,没有界面的,不能直接远程桌面连上去管理,需要使用 Powershe ...

  7. OpenGL光照2：材质和光照贴图

    本文是个人学习记录,学习建议看教程 https://learnopengl-cn.github.io/ 非常感谢原作者JoeyDeVries和多为中文翻译者提供的优质教程 的内容为插入注释,可以先跳过 ...

  8. Django之Django简介，开发环境搭建，项目应用创建

    软件及Django框架简介 软件框架 一个软件框架是由其中各个软件模块组成的: 每一个模块都有特定的功能: 模块与模块之间通过相互配合来完成软件的开发. 软件框架是针对某一类软件设计问题而产生的. M ...

  9. Web前端基础(3):HTML(三)

    1. body中的相关标签 1.1 表格标签:table.tr.td HTML表格由<table>标签以及一个或多个<tr>.<th>或<td>标签组成 ...

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

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