移动端横竖屏适配问题

        最近遇到个移动端的横屏适配问题，总所周知在移动端的字体大小，像素格式使用的是小程序的750rpx 的比例是适配不同机型的展示情况，但是在屏幕横过来的时候，这种按照宽度750rpx 的比例不适用了，这个时候我们应该怎样去改变这个样式呢。

 一.  监听视口

window.addEventListener("orientationchange", function() {
  if (window.orientation === 0 || window.orientation === 180) {
    // 设备为竖屏
    console.log("竖屏");
  } else if (window.orientation === 90 || window.orientation === -90) {
    // 设备为横屏
    console.log("横屏");
  }
});

这段代码通过监听 orientationchange 事件来检测设备方向的变化，然后根据 window.orientation 的值来判断是横屏还是竖屏。

 二. 分类处理

使用媒体查询给横屏竖屏各设样式 

/* 横屏样式 */
@media screen and (orientation: landscape) {
  /* 在横屏时应用的样式 */
  body {
    background-color: lightblue;
    font-size: 32rpx;
  }
}

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  /* 在竖屏时应用的样式 */
  body {
    background-color: lightgreen;
    font-size: 40rpx;
  }
}

三. rpx 问题

虽然单独给横竖屏设置了样式，但是存在rpx设置的不满足自己的需求的情况

       1. 动态计算字体大小 

function adjustFontSize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  var fontSize = Math.min(width, height) * 0.05; // 自行调整比例
  document.documentElement.style.fontSize = fontSize + 'px';
}

window.addEventListener('resize', adjustFontSize);
window.addEventListener('orientationchange', adjustFontSize);

adjustFontSize(); // 初始化调用

这样，你可以定义一个全局的 fontSize，然后相对地设置你的字体大小，比如使用 em 或 rem 单位

注意：在移动端的window.innerWidth和window.innerHeight 展示的是当前可视化窗口的宽高，如果涉及到pop浮层和容器嵌套，需要考虑使用screen.height 和screen.width

        2.  CSS Variables

       结合 CSS 自定义属性，动态调整 rpx 基准值。

:root {
  --base-font-size: 1vw; /* 初始值 */
}

body {
  font-size: calc(var(--base-font-size) * 36);
}

通过这些方法，你可以更好地适配横屏和竖屏下的字体大小问题，根据具体的项目需求可以选择不同的方法进行适配。

四. pad情况 

因为PAD设备的屏幕宽度和高度比例与普通手机不同，可能导致媒体查询将其误判为横屏。在这种情况下，您可以尝试使用min-aspect-ratio和max-aspect-ratio属性，以确保样式规则根据设备的宽高比例而不是设备的实际方向进行应用。

/* 竖屏样式 */
@media screen and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
  /* 您的竖屏布局样式在这里 */
}

/* 横屏样式 */
@media screen and (min-aspect-ratio: 4/3) {
  /* 您的横屏布局样式在这里 */
}

这样的媒体查询将根据设备的宽高比例应用不同的样式，而不是仅仅依赖于设备的方向。