css3 移动端页面全屏旋转,横屏显示。
css3旋转模拟手机横屏。
当手机不能自动旋转时,或有特殊需求。用css3 transform,实现横屏展示。
注意:
- 相关样式注意横屏的显示。
- touch的手势方向没有变,依旧是原来方向,若有相关插件,注意方向。
- 此处用的jq,可以写成js。
- className取镶套的最外层,例如body。
(function () {
var supportOrientation = (typeof window.orientation === 'number' &&
typeof window.onorientationchange === 'object');
var init = function () {
var orientation;
var updateOrientation = function () {
if (supportOrientation) {
orientation = window.orientation;
switch (orientation) {
case 90:
case -90:
orientation = 'landscape';
break;
default:
orientation = 'portrait';
break;
}
} else {
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
}
if (orientation == 'portrait') {
horizontalScreen('body');
}
};
if (supportOrientation) {
window.addEventListener('orientationchange', updateOrientation, false);
} else {
//监听resize事件
window.addEventListener('resize', updateOrientation, false);
}
updateOrientation();
};
window.addEventListener('DOMContentLoaded', init, false);
})();
/*强制横屏*/
function horizontalScreen(className){
// transform 强制横屏
var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// transform: rotate(90deg); width: 667px; height: 375px;transform-origin:28% 50%;
//var iosTopHe = 0;//若有其他样式判断,写于此 $(className).css({
"transform":"rotate(90deg) translate("+((conH-conW)/2)+"px,"+((conH-conW)/2)+"px)",
"width":conH+"px",
"height":conW+"px",
//"margin-top":iosTopHe+"px",
// "border-left":iosTopHe+"px solid #000",
"transform-origin":"center center",
"-webkit-transform-origin": "center center"
});
}
css3 移动端页面全屏旋转,横屏显示。的更多相关文章
- HTML页面全屏/退出全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5中用js让页面全屏
概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...
- 学习笔记: js插件 —— fullPage.js (页面全屏滚动)
fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js, 233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...
- 如何在手机上实现 H5 页面全屏显示
如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...
- iOS - 视频播放处理全屏/横屏时候遇见的坑
视频播放想要全屏,使用shouldAutorotate方法禁止主界面,tabbar控制器横屏,导致push进入播放页面不能横屏的问题... - (BOOL)shouldAutorotate { ret ...
- 页面全屏显示JS代码
1.直接在页面加载时就全屏. <body onload="window.open(document.location,'big','fullscreen=yes'):window.cl ...
- android全屏和取消全屏 旋转屏幕
全屏 getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); 取消全屏 getWindow().clearFlags(Win ...
- 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...
- uni-app app端设置全屏背景色
设置page:{样式},博主调试的时候在app端不起作用,设置配置文件的backgroundColor也没有用,所以博主就使用了一个稍微比较偏的办法解决了,没有用获取设备信息的api来实现 具体操作就 ...
随机推荐
- ARC073D Simple Knapsack
传送门 题目大意 给你n个物品,你有一个容量为W的背包,每一个物品都有它的重量和价值,让你从n个中选取若干个,使得总重量不超过背包的上限,而且使得价值最大. 分析 首先我们不难发现由于W很大,所以这并 ...
- CF609E Minimum spanning tree for each edge
原来觉得是一个LCT,感觉自己瞬间傻掉…… 考虑到先做一个最小生成树求出做最小生成树的代价$ans$,顺便标记一下树边和非树边,把边按照输入$id$排序回去之后扫,如果扫到一条树边,那么此时的答案就是 ...
- 6.Model类
Basic Concepts 在Model/View结构中,Model提供标准的接口让View和Delegate获得数据.在QT中,标准的接口都被定义在QAbstractItemModel类 ...
- c#静态方法和非静态方法区别
c#静态方法和非静态方法区别 C#的类中可以包含两种方法:C#静态方法与非静态方法.那么他们的定义有什么不同呢?他们在使用上会有什么不同呢?让我们来看看最直观的差别:使用了static 修饰符的方法为 ...
- SQLServer存储引擎——05.索引的结构和分类
5. SQLServer存储引擎——索引的结构和分类 关系型数据库中以二维表来表达关系模型,表中的数据以页的形式存储在磁盘上,在SQL SERVER中,数据页是磁盘上8k的连续空间,那么,一个表的所有 ...
- java实现生产者消费者模式
生产者消费者问题是一个著名的线程同步问题,该问题描述如下:有一个生产者在生产产品,这些产品将提供给若干个消费者去消费,为了使生产者和消费者能并发执行,在两者之间设置一个具有多个缓冲区的缓冲池,生产者将 ...
- 清理前一天log日志shell
清理前一天log日志shell #!/bin/bashlogPathList=`cat <<STD/data/logs/aiclass/backcms/data/logs/aiclass/ ...
- numpy中transpose和swapaxes函数讲解
1 transpose() 这个函数如果括号内不带参数,就相当于转置,和.T效果一样,而今天主要来讲解其带参数. 我们看如下一个numpy的数组: arr=np.arange(16).reshape( ...
- js对象的深浅拷贝
JS数据类型可以分为(ES5,暂时不考虑ES6): 简单数据类型:Number.String.undefined.boolean 复杂数据类型:Object.Array 简单的数据类型,往往是赋值操作 ...
- AngularJS(一)理论篇
前言 大概今年春天的时候,自己对这个词产生了兴趣,那会只是简单的查了一下,并没有深入研究过这部分知识块,现在终于开始接触这些东西. 内容 AngularJS在web应用方面是一个非常完美的JavaSc ...