移动端横屏

  最近做了一个移动端的项目,其中需求是,用户登录成功后,要求页面内容是以横屏的样式来展示的。在这里简单的总结记录下实现的方式。

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
        );
      };
    
posted @   攻城Alone  阅读(193)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
点击右上角即可分享
微信分享提示