手机端html只允许竖屏,关于移动端页面强制竖屏的方法
最近工作中写了一个移动端的页面,本来是没什么的,但是有一个要求感觉很奇怪,从前也没有遇到过,就是我写的这个页面需要放在一个APP中,但是这个APP是横屏的,打开这个页面的webview也是横屏的(最新版的APP打开的时候是竖屏的webview),本来我们是用的rem布局,横屏的状态下也是没有什么问题的,但是甲方希望在横屏打开的时候强制这个页面竖屏显示。所以就有了下面一系列的操作了。
首先是判断横屏的状态,使用的一下的代码:
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
function orient() {
if(window.orientation == 90 || window.orientation == -90) {//横屏
//ipad、iphone竖屏;Andriod横屏
//$("body").attr("class", "landscape");
//orientation = 'landscape';
//alert("ipad、iphone竖屏;Andriod横屏");
$("p").text("横屏");
return false;
} else if(window.orientation == 0 || window.orientation == 180) {//竖屏
//ipad、iphone横屏;Andriod竖屏
// $("body").attr("class", "portrait");
// orientation = 'portrait';
//alert("ipad、iphone横屏;Andriod竖屏");
$("p").text("竖屏");
return false;
}
}
//页面加载时调用
$(function() {
orient();
});
//用户变化屏幕方向时调用
$(window).on('orientationchange', function(e) {
orient();
});
这个就是在监测手机的方向。但是,因为打开的这个APP的时候就是横屏打开的,多以这个是没办法监测到的,而且这个还有一个前提就是手机必须打开了自动旋转才是可以的。所以上面的方法被抛弃了。
既然智能的办法被抛弃了,那就用最贱的办法,就是监测屏幕的宽度和高度。当高大于宽的时候,我们默认手机是竖屏的状态,当宽大于高的时候,我们认为是横屏的状态。(当然了这个也是有局限的,但是考虑到新的APP中已经把横竖屏的问题解决了,这里就姑且这么做了)。当竖屏的状态我们是不需要做什么的。但是在横屏的状态下,我们就要把页面转动90度了。废话不多说,直接看代码:
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度 强制用户进行竖屏显示
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
//$wrapper = document.getElementsByTagName("body")[0],
$wrapper = document.getElementById("vue"),
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;";
style += "font-size:" + (width * 100 / 1125) + "px";
var html_doc = document.getElementsByTagName("html")[0];
html_doc.style.cssText = "font-size:" + (width * 100 / 1125) + "px";
} else { // 竖屏
style += "width:" + height + "px;";
style += "min-height:" + width + "px;";
style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
//style += "font-size:" + height * 100 / 1125 + "px;";
//$("html").css({"font-size":(height * 100 / 1125),"overflow-y":"hidden"});
var html_doc = document.getElementsByTagName("html")[0];
html_doc.style.cssText = "font-size:" + height * 100 / 1125 + "px;" + "overflow-y:"+"hidden;"+"height:"+height+"px;";
style += "overflow-y: hidden;";
add_tab();
$wrapper.style.cssText = style;
}
}
window.onresize = detectOrient;
detectOrient();
function add_tab(){
var clone_tab = $("footer").clone();
$("footer").remove();
clone_tab.css({"transform":"rotate(-90deg)","transform-origin":"top right"})
$("body").append(clone_tab);
clone_tab.css({"position":"fixed","right":"1.77rem","bottom":"4rem","left":"auto","top":"0","width":"11.25rem","height":"1.77rem"})
}
相信这段代码对于前端人员来说不是很难,但是有一点需要注意的有三点。
第一点:
最开始的时候我是为了方便直接旋转的整个的html,这个是时候会有一个问题,就是页面中的fixed定位的元素,定位就不管用了(代码中的就是作为tab切换放在底部的);这个就需要我们更改了,既然旋转父元素,子元素就不管用了,那我们就不要旋转父元素了,直接旋转他的兄弟元素就可以了。我这里是旋转的一个叫做#vue的元素,因为我的页面中的其他的内容全部是在这个div当中的。所以我就旋转了这个元素。然后这个时候定位是可以用的,但是样式不对,所以在我的add_tab这个函数中就是在调整这个元素的大小和样式,让他能正常的显示在屏幕的右侧,也就是竖屏的状态下,屏幕的底端。
第二点:
第二点需要注意的是,应为我用的是rem布局,多以我会更改html的font-size,但是这个时候就要小心了,当我们旋转过来之后,宽变成了高,高变成了宽,所以我们需要用height来计算根目录的字体大小。
第三点:
第三点就是在程序中注明的,需要我们注意旋转的中心,默认的旋转中心是在所选元素的中心点。多以我们要改变旋转的中心点。旋转之后还要把html的overflow-y:hidden。否则就会出现多余的滚动。
这样的话,基本上就把整个页面旋转过来了,并且把底部的fixed定位的元素再次定位成功了。比较幸运的是我们用的弹窗是用的layui的弹窗,再把这个弹窗旋转90度就可以了。
ps:最后发现一点问题是没办法解决的,就是当页面够长的时候,也就是有滚动条的时候,弹窗出来以后,滑动后面的遮罩层的话,后面的页面会向上滑动。这个本来是可以解决的,我上面的这个文章就是利用fixed定位解决的,但是因为旋转了,这个失效了,所以就没有好的办法了。在竖屏状态下是没问题的。
手机端html只允许竖屏,关于移动端页面强制竖屏的方法相关推荐
- html页面禁止竖屏,关于移动端页面强制竖屏的方法
最近工作中写了一个移动端的页面,本来是没什么的,但是有一个要求感觉很奇怪,从前也没有遇到过,就是我写的这个页面需要放在一个APP中,但是这个APP是横屏的,打开这个页面的webview也是横屏的(最新 ...
- 关于移动端页面强制竖屏
最近工作中写了一个移动端的页面,本来是没什么的,但是有一个要求感觉很奇怪,从前也没有遇到过,就是我写的这个页面需要放在一个APP中,但是这个APP是横屏的,打开这个页面的webview也是横屏的(最新 ...
- [html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由 两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护 个人简介 ...
- [css] 移动端页面不满一屏时如何实现满屏背景?
[css] 移动端页面不满一屏时如何实现满屏背景? body {min-height: 100vh; } 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
- html手机端背景显示不全,手机浏览器打开PC端网站,背景显示不全怎么办?
原标题:手机浏览器打开PC端网站,背景显示不全怎么办? 随着移动互联网的发展,大多数企业在制作网站的时候,为了兼容各种设备,会制作出PC端.移动端二种版,根据不同的设备跳转到不同的网站,从而实现用户体 ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- 在H5移动端开发强制竖屏,横屏时提示
1.不同的浏览器有不同的做法,参考如下: <!-- uc强制竖屏 --> <meta name="screen-orientation" content=&quo ...
- php 手机端播放器,用JS代码适配电脑端和手机端播放器代码
用JS代码适配电脑端和手机端播放器代码 蓝叶 网站设计 2016-08-10 10668 9评论 随着html5的崛起,很多网站都采用html5代码来设计,让网站美观大气,但是 ...
- 企业微信手机端可以退出吗?会影响电脑端企业微信吗?
现在很多企业选择企业微信作为移动办公软件,企业微信打破了传统办公软件的地域限制,可以在手机端和电脑端进行登录,随时可以进行工作事宜. 前言 现在很多企业选择企业微信作为移动办公软件,企业微信打破了传统 ...
- jeesite手机端只有登录和系统首页,没有别的页面功能详解
大胖老师交流群:301101217,欢迎大家加入 在spring-mvc.xml配置文件,jeesite配置了手机端的拦截器 <!-- 手机视图拦截器 --> <mvc:interc ...
最新文章
- 如何提高分布式系统的可用性
- rabbitmq实战_RabbitMQ 实战系列之:消息传递
- Android之Android Studio 快捷键整理分享
- Android 全局悬浮按钮,悬浮按钮点击事件
- 电商常用字体_字体商用有风险,侵权罚款上千万!告诉你怎么正确使用
- 实现系统菜单的两种方式
- 各种边缘检测算子特点比较(canny)
- Javascript 中的map/reduce
- 智汀、米家、苹果homekit智能门锁新体验,打开不一样的大门
- 2022卡塔尔世界杯来临,体育界最新创意二维码案例大盘点!
- crmeb知识付费二开文档
- rtspplayer播放器实现
- Java的高级篇--JDK8的新特性
- java坦克大战(1.0)
- 引导魔女之力,征服星辰大海 升级篇: 重要事情说三遍: 升级!升级!!升满级!!! 简述: 1.本篇仅升级,涉及到的技巧全职业都可以参考; 2.考虑到萌新刚玩通关护卫者系统等级不高,故
- 登录服务器虚拟控制台,服务器控制台登录类
- WCF服务通过TCP实时监控客户端状态,并可以向客户端广播推送消息,实现双向通信
- 清华计算机系残疾学生,清华学霸矣晓沅:拖拽着残疾的身体,追求生命的完美...
- 全志 Tina Linux 存储介质切换:eMMC,SPI NAND,SPI NOR,SD Card,SD NAND
- 无损播放器Linux系统,Ubuntu Linux下支持无损CUE的音乐播放器——Qmmp