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> <!-- 使用 HTML5 doctype,不区分大小写 --> <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入门教程 ] Python生成随机数模块(random)使用方法
1.使用randint(a,b)生成指定范围内的随机整数.randint(a,b)表示从序列range([a,b])中获取一个随机数,包括b. >>> random.randint( ...
- CF1253F Cheap Robot（神奇思路，图论，最短路，最小生成树/Kruskal 重构树/并查集）
神仙题. 先考虑平方级别的暴力怎么做. 明显答案有单调性,先二分 \(c\). 先最短路预处理 \(dis_u\) 表示 \(u\) 到离它最近的充电站的距离(一开始把 \(1\) 到 \(k\) 全 ...
- Pytorch的tensor数据类型
基本类型 torch.Tensor是一种包含单一数据类型元素的多维矩阵. Torch定义了七种CPU tensor类型和八种GPU tensor类型: Data tyoe CPU tensor GPU ...
- 理解Promise.all，Promise.all与Promise.race的区别，如何让Promise.all在rejected失败后依然返回resolved成功结果
壹 ❀ 引 我在 es6入门4--promise详解 这篇文章中有详细介绍Promise对象的用法,文章主题更偏向于对于Promise概念的理解与各方法基本使用介绍:而世上一个比较有趣的问题就是,即 ...
- settings.py相关配置
INSTALLED_APPS #配置项目绑定的应用 TEMPLATES #配置项目使用的模板引擎 DATABASES #设定绑定的数据库 TIME_ZONE #设定时区,时区的设定可能 ...
- Python中字符的编码与解码
1 文本和字节序列 我们都知道字符串,就是由一些字符组成的序列构成串,那么字符又是什么呢?计算机只能识别二进制的东西,那么计算机又为什么会显示我们的汉字,或者是某个字母呢? 由于最早发明使用计算机是美 ...
- Python 内置函数补充匿名函数
Python3 匿名函数 定义一个函数与变量的定义非常相似,对于有名函数,必须通过变量名访问 def func(x,y,z=1): return x+y+z print(func(1,2,3)) 匿名 ...
- Python爬取前程无忧网站上python的招聘信息
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 我姓刘却留不住你的心 PS:如有需要Python学习资料的小伙伴可以 ...
- 我用python爬取了知乎Top沙雕问题排行榜
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 数据森麟 PS:如有需要Python学习资料的小伙伴可以加点击下方 ...
- java核心技术第三篇之JDBC第一篇
01.JDBC_两个重要的概念: 1).什么是数据库驱动程序:由数据库厂商提供,面向某种特定的编程语言所开发的一套访问本数据库的类库. 驱动包一般由两种语言组成,前端是:面向某种特定编程语言的语言:后 ...