ipad横竖屏切换,页面适配方法
如果想始终横屏展示给用户,方法有很多,我也来写几种吧:
1.简单粗暴型:当ipad竖屏的时候,给一个蒙层提示,让客户不得不进行横屏操作
// ipad竖屏适配
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight
if( width >= height ){
$('.ipad_t').hide(); //横屏--隐藏蒙层
}
else{
$('.ipad_t').show(); //竖屏--弹出蒙层
}
}
window.onresize = detectOrient;
detectOrient();
备注:这种方式虽然不是太友好,但简单有效,适当选择!
2.友好型:当ipad竖屏的时候,对根wrap进行旋转操作
// ipad竖屏适配
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
$wrapper = document.getElementById("J_wrapper"),
style = "";
if( width >= height ){
style += "width:" + width + "px;";
style += "height:" + height + "px;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
}
else{
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
备注:这种方式有个大坑,由于对根wrap使用了transform,所以,如果其子元素用fixed定位的话,会使fixed属性失效(虽然fixed属性很顽强,但是一物降一物啊--父元素有transform的时候fixed会失效)
3.这种是最完美的,就是严格意义上的适配,两套CSS,如果是竖屏的话用一套,横屏的话用另一套
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
备注:这种开发成本高,但效果最有效
ipad横竖屏切换,页面适配方法相关推荐
- ipad横竖屏切换解决方案
2011年08月01日 星期一 10:09 由于ipad的横竖屏不同,所以好的应用,横竖屏的页面布局也不一样.那么就需要横竖屏的整体解决方案.先看一个横竖屏布局不一样的界面. 上面两张图是来自同一个界 ...
- android的横竖屏切换,Android横竖屏切换 初步探究
当手机横竖屏切换的时候,activity,默认会重新走一遍生命周期,即销毁当前,然后重新创建 首先,很多软件在设计和开发中为了避免横竖屏切换时引发不必要的麻烦,通常需要让App禁止掉横竖屏的切换,这就 ...
- 视频播放如何横竖屏切换
最近一直在做视频相关的项目,其中一个很重要的功能就是播放时的横竖屏切换,于是研究对比了下市场上主要视频类APP的横竖屏切换方式,共分为两种,一种以优酷视频和土豆视频为代表,当横放手机时整个界面都旋转了 ...
- 完美解决三星手机拍照后横竖屏切换导致的回调为null以致程序崩溃的问题(包括三星note3的特殊适配)
场景:安卓开发中我们经常会有拍照上传的需求,比如上传图片,或者上传头像等等,方法也比较常规,通过调用startActivityForResult(Intent intent, int requestC ...
- uniAPP实现单页面横竖屏切换
uniAPP实现单页面横竖屏切换 最近在用uniapp开发,发现官方文档只能全局配置横竖屏切换,找了些文档,最终实现了效果 一.官方全局设置 https://uniapp.dcloud.io/coll ...
- FirefoxOS横竖屏切换应用开发一般方法总结
结论:目前Firefoxos已经支持横竖屏自动切换,前提是:手机支持orientationsensor 具体的实现方式如下: 1.一般情况下,在我们开发的应用在没有对横竖屏切换开发做任何设置或者限制的 ...
- android横竖屏切换方法,Android横竖屏切换的生命周期
关于Android手机横竖屏切换时Activity的生命周期问题,网上有很多相似的文章,大多数都是说明在竖屏切换横屏时Activity会重启一次,而在横屏切换竖屏时Activity会重启两次. 我本身 ...
- android横竖屏切换方法,Android 4.0 横竖屏切换注意事项
==Android 2.3以前的横竖屏切换== 在Android 2.3平台上,我们可以需要设置界面的横竖屏显示时,可以在AndroidManifest.xml中,对Activity的属性添加以下代码 ...
- uniapp 移动端 两种横竖屏切换方案
全局配置横竖屏 1.在pages.json中添加配置: "globalStyle": {"pageOrientation": "auto"} ...
- android activity横竖屏切换,Activity重新创建问题解决!
activityA和B A跳转到B 1:在主配置文件中添加Bactivity,如果不想B在横竖屏切换的时候导致activity的销毁和重新创建;可在声明activity中添加 android:conf ...
最新文章
- 【攻防世界019】SignIn
- javaconfig配置mysql_spring cloud config使用mysql存储配置文件
- 抓住语音社交风口,1天快速搭建语音聊天室
- edge浏览器如何把网页放到桌面_最强桌面浏览器
- 爬虫实战:过年你被催婚啦吗?爬取相亲网站,看看当下年轻小姐姐的择偶观。
- matlab norm向量和矩阵的范数
- oracle resize什么意思,Oracle调整表空间大小resize
- H5 37-背景缩写
- nlogn最长单调递增
- SQL注入攻击防御深层思考
- 软著申请流程与方法详解
- envi神经网络分类原理,ENVI神经网络分类
- 美图秀秀一寸照片的制作
- 怎么取消两台计算机共享,小编教你两台电脑如何共享文件
- c语言驻波,C版:基于声学驻波的液位检测方法C2-1(备份存档)
- 与其被生活逼,不如被自己逼
- 至联云讲解《IPFS凭什么能让全世界投资者疯狂》
- mysql 中继日志路径,MySQL各种日志总结
- 无效的列类型所执行的sql语句
- 使用USB转ttl给stm32下载程序