移动端横屏
最近做了一个移动端的项目,其中需求是,用户登录成功后,要求页面内容是以横屏的样式来展示的。在这里简单的总结记录下实现的方式。
css 的方式
-
媒体查询 orientation
-
语法:
orientation:portrait | landscape
@media (orientation: portrait) {}
或者
@media (orientation: landscape) {}
portrait:指定输出设备中的页面可见区域高度大于或等于宽度,即竖屏状态。
landscape:除portrait值情况外,都是landscape。(viewport 处于横向,即宽度大于高度。)
实例代码:@media (orientation: portrait) { .helper_main { transform-origin: 0 0; transform: rotateZ(90deg) translateY(-100%); } }
js 的方式
- 思路是:获取视图的宽高,通过比较宽和高的大小,改变元素的宽和高
const ele_width = document.documentElement.clientWidth; const ele_height = document.documentElement.clientHeight; const max = ele_width > ele_height ? ele_width : ele_height; const min = ele_width > ele_height ? ele_height : ele_width; const app_ele = document.getElementById('mobile_live'); app_ele.style.width = max + 'px'; app_ele.style.height = min + 'px';
相关的事件
-
orientationchange 事件,屏幕旋转触发的事件
window.addEventListener("orientationchange", function() {})
或者
window.onorientationchange = function() {}
-
window.orientation 获取屏幕旋转的角度
if (window.orientation == 0 || window.orientation == 180){ console.log('portrait'); } if (window.orientation == 90 || window.orientation == -90){ console.log('landscape'); }
-
screen.orientation.angle 获取屏幕旋转的角度
window.onorientationchange = function () { console.log( 'the orientation of the device is now ' + screen.orientation.angle ); };
标签:
Browser
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
· AI工具推荐:领先的开源 AI 代码助手——Continue