移动端横屏/强制横屏
整体演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 竖屏样式 */
@media all and (orientation: portrait) {
body div {
width: 200px;
height: 500px;
background-color: pink;
}
}
/* 横屏样式 */
@media all and (orientation: landscape) {
body div {
width: 500px;
height: 200px;
background-color: orangered;
}
}
</style>
</head>
<body>
<div >这个是大屏幕</div>
</body>
</html>
<script>
console.log('window:',window.orientation);
console.log('window:',window.orientationchange);
window.addEventListener("onorientationchange"in window ? "orientationchange": "resize", function() {
//判断window.orientation === 180||===0代表竖屏
if (window.orientation === 180 ||window.orientation=== 0){
console.log('竖屏状态!');
//竖屏情况下删除横屏样式
document.body.classList.remove("landscape");
};
//判断window.orientation === 90||===-90代表横屏
if (window.orientation === 90 ||window.orientation=== -90){
console.log('横屏状态!');
//竖屏情况下添加横屏样式
document.body.classList.add("landscape");
}
}, false);
// window.addEventListener("orientationchange", function () {
// if (window.orientation === 90 || window.orientation === -90) {
// console.log('横屏状态!');
// document.body.classList.add("landscape");
// } else {
// console.log('竖屏状态!');
// document.body.classList.remove("landscape");
// }
// });
</script>
---------------------------------------------------------------------------------------------------------------------------
可以使用JavaScript的`window.orientation`属性来判断当前屏幕的方向,其中0表示竖屏,90表示向左横屏,-90表示向右横屏。根据不同的方向,可以动态地修改CSS样式,以实现不同的布局效果。具体实现步骤如下:
1. 在CSS中定义针对横屏的样式,例如:
```
@media screen and (orientation: landscape) {
/* 横屏样式 */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
```
2. 在JavaScript中监听`window.orientation`属性的变化,根据不同的值来添加或移除对应的CSS类,例如:
```
window.addEventListener("orientationchange", function() {
if (window.orientation === 90 || window.orientation === -90) {
document.body.classList.add("landscape");
} else {
document.body.classList.remove("landscape");
}
});
```
在以上代码中,当屏幕为横屏时,会给`<body>`元素添加`landscape`类,从而触发CSS中定义的横屏样式。当屏幕为竖屏时,则会移除该类,恢复默认样式。
需要注意的是,由于不同浏览器对`orientationchange`事件的支持可能不同,因此建议在事件处理函数中加入对`resize`事件的监听,以便在浏览器窗口大小发生变化时也能正确地更新样式。
---------------------------------------------------------------------------------------------------------------------------
强制横屏
<body><div id="app"><h1>我是一个测试网页</h1></div>
</body>
<script>function crossFun(ele) {var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;//第一次进来 判断是不是横屏if (width < height) {ele.style.width = height + 'px';ele.style.height = width + 'px';ele.style.top = (height - width) / 2 + 'px';ele.style.left = 0 - (height - width) / 2 + 'px';ele.style.transform = 'rotate(90deg)';ele.style.transformOrign = '50% 50%';ele.style.position = 'relative';}//设备旋转或者窗口变化时候进行 横竖屏处理 在来回切换的时候回出现BUG 使用定时器解决var evt = "onorientationchange" in window ? "orientationchange" : "resize";window.addEventListener(evt, function () {setTimeout(function () {var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;if (width > height) {ele.style.width = width + 'px';ele.style.height = height + 'px';ele.style.top = 0;ele.style.left = 0;ele.style.transform = 'none';ele.style.transformOrign = '50% 50%';ele.style.position = 'relative';} else {ele.style.width = height + 'px';ele.style.height = width + 'px';ele.style.top = (height - width) / 2 + 'px';ele.style.left = 0 - (height - width) / 2 + 'px';ele.style.transform = 'rotate(90deg)';ele.style.transformOrign = '50% 50%';ele.style.position = 'relative';}}, 100);}, false);}crossFun(document.getElementById('app')); //注意 方法里面用的是原生的方法 传入的DOM应该用原生的方式获取 或者对原方法进行修改即可
</script>
-------------------------------------------------------------------------------------------------------------------------------
html {/*用于 获取 屏幕的可视宽高*/width: 100%;height: 100%;overflow: hidden;}body {/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*//* position: fixed; */left: 0;top: 0;width: 100%;height: 100%;}@media screen and (orientation:portrait) {/*竖屏样式*/#box {transform-origin: 0 0;transform: rotateZ(90deg) translateY(-100%);}}
// 横屏(function () {function resize() {var body = document.getElementsByTagName('body')[0];var html = document.getElementsByTagName('html')[0];var width = html.clientWidth;var height = html.clientHeight;var max = width > height ? width : height;var min = width > height ? height : width;body.style.width = max + "px";body.style.height = min + "px";}resize();window.addEventListener("resize", resize)})();
移动端横屏/强制横屏相关推荐
- div旋转 vue_Vue实现在线签名(微信端内强制横屏/手机浏览器横竖屏支持)实现过程...
1.如何实现横屏功能 微信端: 由于微信端默认不开启横屏模式,且在安卓手机上,就算开启了手机自带的屏幕旋转,微信也需要手动开启横屏模式才可以让微信横屏显示. 而且大多数用户都不会开启,因为太不方便了, ...
- [html] 移动端如何让页面强制横屏显示?
[html] 移动端如何让页面强制横屏显示? 说个想法 不一定能实现web端的话 通过判断页面屏幕宽度(这个得开陀螺仪权限吧) 然后经行div旋转 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放 ...
- 移动端如何强制页面横屏
##背景 最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏.这是js实现手机横竖屏事件 然而当用 ...
- 移动端如何让页面强制横屏
移动端如何让页面强制横屏 字数700 阅读4734 评论8 喜欢8 最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=.=),要求横屏显示,不能竖屏. 有经验的你肯定 ...
- vue移动端强制横屏展示
一.在 index.html 中加入计算 font-size 代码 window.calcFontSize = () => {document.documentElement.style.fon ...
- 高德地图强制横屏后(旋转90deg)在手机上拖动方向问题(vue)
大屏需要在手机端横屏展示,强制横屏后,地图的拖动方向也相对正常的方向旋转90度 代码片段 html部分 <divid="mapInit"@touchstart.prevent ...
- html 静止横屏,CSS实现Html页面强制横屏
说起来html页面强制横屏,最多的都是js实现html页面强制横屏,用css实现这个功能的,很少人知道,那么今天就谈一谈如何用CSS实现html页面横屏显示,无论用户怎么旋转手机都是横屏!!! 场景分 ...
- Android开发之强制横屏和强制竖屏
原文地址:https://blog.csdn.net/qq_37219980/article/details/71194313 强制竖屏设置 1.代码在Activity的onResume方法中添加如下 ...
- 全志 增加强制横屏标志 Patch
modify 增加强制横屏标志diff --git a/android/device/softwinner/t3-p1/t3_p1.mk b/android/device/softwinner/t3- ...
最新文章
- webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别
- ROS学习:创建机器人的urdf
- Java编程思想:擦除的神秘之处
- 【PP】长交期计划(LTP)简介
- 力扣- -231. 2的幂
- PHP陈明忠_《PHP网站开发案例教程》习题答案
- 正则表达式中的量词(限定符)含义的准确理解
- ngrok服务器搭建_利用暴露在外的API,无法检测的Linux恶意软件将矛头指向Docker服务器...
- python九九乘法表右对齐_python语法练习题之九九乘法表
- 最长有效括号子串长度 c语言,LeetCode: Longest Valid Parentheses (求最长有效匹配括号子串的长度)...
- 编写python扩展模块_《深度剖析CPython解释器》27. 使用Python/C API编写扩展模块:编写扩展模块的整体流程...
- python wordpress xmlrpc 调用_20542通过wordpress_xmlrpc的python包远程操作wordpress 编辑 更新Post...
- 计算机教师帮扶记录,信息技术辅导记录.doc
- poj 2192 Zipper
- java中的map是什么_Java中Map的使用
- tigase关闭damain的匿名认证(anonymous authentication)
- URLEncoder和URLDecoder;cookie中保存特殊字符以及URL中乱码问题解决方案
- 【ArcPy视频教程】基于 ArcGIS Pro 的 ArcPy 教程(录制中)
- FDDB人脸检测测试集使用方法
- 入侵检测:User-Agent