如何实现uni-app页面跟随手机屏幕自动旋转？屏幕适配方案解析

最近用uniApp在做一个移动端页面的时候，有这样一个场景，因页面设计只适合横屏查看。

竖屏，按钮会折行，如图下所示：

所以需要默认进来让页面自动旋转至竖向 

当设备旋转横向时，页面需要自动旋转这种功能。需求很明确，但网上找了很多方法，比较复杂麻烦，这里我通过简单的js+scss方式就能实现 

一，模板代码：

二，通过setProperty设置两个属性，并且为其设置默认值100vh和100vw

三，css顶部定义两个变量为上一步设置的属性

 四，重点样式，mainBg为页面主展示区的容器，它的宽动态取值，竖屏的时候的宽为设备的高（其值是100vh）

横屏的时候的宽为设备的宽（其值是100vw）

如果有其它样式的宽高需要动态取值同理可以在这两个样式块里添加设置。

第二第三步骤的默认值如果要改动态的怎么设置？方法如下 

if (this.buildingData.id == 2) {
		document.getElementsByTagName('body')[0].style.setProperty('--portraitW', '180vh');
		document.getElementsByTagName('body')[0].style.setProperty('--landscapeW', '180vw');
	} else {
		document.getElementsByTagName('body')[0].style.setProperty('--portraitW', '120vh');
		document.getElementsByTagName('body')[0].style.setProperty('--landscapeW', '120vw');
}

  如果还没明白又有需求的同仁 阅读原文 查看详细。