uniapp项目H5端横屏问题-样式错乱+字体大小+video

项目场景：

项目场景：uniapp项目 H5端，由于用户手机打开了旋转模式，横屏的话H5会变形，之前设计没做这方面的样式兼容。

---

问题描述：

部分用户手机打开了旋转之后，打开H5会有样式混乱问题。

---

原因分析：

因为前期产品设计没有考虑到横屏，开发也没做兼容。

---

解决方案：

方案1

通过媒体查询设置2套样式

// portrait 为判断为竖屏
@media only screen and (orientation: portrait)  {
        // 需求代码
}

// landscape 为判断为横屏
@media only screen and (orientation: landscape)  {
// 需求代码
}

举个栗子：

<template>
	<view class="content">
		<view>Box 1</view>
		<view>Box 2</view>
		<view>Box 3</view>
	</view>
</template>

<script>
	// import rotate from '@/utils/rotate'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	@media (orientation: portrait) {
		.content {
			flex-direction: row;
			background-color: aqua;
		}
	}


	@media (orientation: landscape) {
		.content {
			flex-direction: column;
			background-color: red;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
</style>

细心的同学会发现 flex-direction: column;
在媒体查询中不生效，原因是媒体查询的级别比类选择低，需要将.content中的属性去掉即可！
注意下面的字体大小，额外问题讲解~

竖屏：

横屏：

方案2

通过JS监听屏幕有无打横，有的话设置一个遮布，提醒用户需要不能打横。

部分原生组件在移动端，层级比遮罩高，所以判断是否有video（有其他的自行判断），有的话则需要隐藏。
另外一个情况就是如果video全屏下，手机打横要怎么处理，isHiddenModal 这里做了处理~

// 此处代码是网上参考一个作品的，出处可以评论叫我加连接~
/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-06-14 14:08:06
 * @FilePath: \msedu-front-yunkai-uniapp\src\utils\rotate.js
 */
(function rotate() {
     var orientation = window.orientation;
     var pd = null;

     function createPd() {
          if (document.getElementById('preventTran') === null) {
               var imgData = 'data:image/png;base64,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';
               pd = document.createElement('div');
               pd.setAttribute('id', 'preventTran');
               pd.style.position = 'fixed';
               pd.style.left = '0';
               pd.style.top = '0';
               pd.style.width = '100%';
               pd.style.height = '100%';
               pd.style.overflow = 'hidden';
               pd.style.backgroundColor = '#2e2e2e';
               pd.style.textAlign = 'center';
               pd.style.zIndex = '99999';
               document.getElementsByTagName('body')[0].appendChild(pd);
               var img = document.createElement('img');
               img.src = imgData;
               pd.appendChild(img);
               img.style.margin = '60px auto 30px'
               var br = document.createElement('br');
               var p = document.createElement('p');
               p.style.width = '100%';
               p.style.height = 'auto';
               p.style.fontSize = '22px';
               p.style.color = '#626262';
               p.style.lineHeight = '34px';
               p.style.textAlign = 'center';
               p.innerHTML = '为了您的良好体验';
               p.appendChild(br);
               p.innerHTML += '请将手机/平板竖屏操作';
               pd.appendChild(p);
          }
     }
     if (orientation == 90 || orientation == -90) {
          if (pd == null && document.getElementById('preventTran') === null) {
               createPd();
          }
          document.getElementById('preventTran').style.display = 'block';
          isHiddenModal(true);
     } else {
          isHiddenModal(false);
     }

     window.onorientationchange = function () {
          if (pd == null && document.getElementById('preventTran') == null) createPd();
          document.getElementById('preventTran').style.display = 'none';
          rotate();
     };
})();

// 判断是否需要隐藏video
function isHiddenModal(flag = true) {
	// 此处检测是否有视频全屏，有的话不限制遮罩
     var handle = document.querySelector(".video");

     let fullFlag = getFullscreenElement();
     if (handle) {
          if (flag && !fullFlag) {
               handle.style.display = 'none';
          } else {
               handle.style.display = 'block';
          }
     }
}

// 获取当前全屏的句柄
function getFullscreenElement() {
     return !!(
          document.fullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullScreenElement ||
          document.webkitFullscreenElement || null
     );
}

export default {}

横屏效果：

额外问题：

1、屏幕一开始根据H5端是打横还是打竖来确定屏幕的宽度，导致upx或者rpx的字体大小初始化问题就固定了其比例。

解决方案1：使用px，不建议，因为使用px就无法做到自动适配，另外如果是老项目，工程量大。
解决方案2：配置uniapp，修改pages.json文件，固定宽度，确定也是不能自动适配。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"rpxCalcMaxDeviceWidth": 750, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

查看官网 点击此处
官方文档里面写着，又可能会引生其他bug，所以说不能随便滥用rpx，upx之类的…hhhhh~
不过我们这个也要根据项目来确定的，我们的项目是用于H5以及小程序端，给的设计稿也是750px来设计的，所以上面配置对于我们项目影响不大。