uni-app实现微信小程序横屏适配题目

程序员 · 2024-10-8 05:33:03

1.小程序怎样横屏

在手机上启用屏幕旋转支持

从小程序根本库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中设置 "pageOrientation": "auto" 。
以下是在单个页面 json 文件中启用屏幕旋转的示例。
代码示例：
{ "pageOrientation": "auto"}如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示地域尺寸也会随着屏幕旋转而变化。
从小程序根本库版本 2.5.0 开始， pageOrientation 还可以被设置为 landscape ，体现固定为横屏显示。

微信小程序开辟文档
2.正常页面横屏后出现的适配题目

在正常情况下，竖屏页面的宽度100%、100vw的值为750rpx。但是横屏之后，750rpx的现实宽度为手机屏幕的高，如果我们在横屏状态下照旧利用rpx，就会出现团体页面变大，字体以及组件都会变大的题目。

同样设置的尺寸，在横屏显示将会变大。如果说我们的屏幕宽高比为1:2的话，同样设置100rpx100rpx的按钮，在横屏状态下显示的大小是竖屏的2倍大小，但是他仍然是100rpx100rpx。显然如许往往是满足不了我们的需求的，页面会看起来非常丢脸。
横屏适配方案

1.利用px举行结构

固然利用px结构，横屏之后元素没有变大，但是在差别装备上，屏幕的宽高是不肯定的，667px不是全部装备都能占满屏幕，以是利用px结构照旧有范围性。同样达不到我们想要的效果。

差别装备的效果差别照旧挺显着，显然如许px的效果也总是不尽人意。
2.利用VMIN举行结构

起首简朴先容下css3的两个属性vmax和vmin

vmax 相对于视口的宽度或高度中较大的谁人。此中最大的谁人被均分为100单元的vmax
vmin 相对于视口的宽度或高度中较小的谁人。此中最小的谁人被均分为100单元的vmin

竖屏结构的时间，750rpx就是竖屏结构屏幕的宽度，vmin不管横竖屏的情况下，100vmin都是手机屏幕的宽度，以是rpx与vmin之间有一个换算的关系：x rpx=( x * 100 / 750)vmin。
也就是说： 75rpx转化为vmin就是 75 * 100/750=10vmin
以是我们将rpx转化成vmin就可以正常的举行横屏的开辟。
<style lang="scss" scoped>@function tovmin($rpx){//$rpx为必要转换的字号 @return #{$rpx * 100 / 750}vmin;}.main-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; .one { width: tovmin(750); height: tovmin(80); background-color:red; } .two { width: tovmin(1500); height: tovmin(80); background-color:red; } .three { width: tovmin(200); height: tovmin(80); background-color:red; }}</style>扩展：
既然我们可以通过vmin的方式举行横屏适配，vmin是将视口宽度和高度较小的谁人中分100单元，同样我们是不是也可以用vh大概vw代替。

uni-app实现微信小程序横屏适配题目

所属分类: 问答交流

新帖推荐: 30日

推荐作品