uniapp 小程序横屏处理方案
uniapp小程序横屏处理方案
·
uniapp小程序横屏处理方案
在pages.json中添加 pageOrientation:“landscape”
{
"path":"pages/studyList/studyList",
"style":{
"enablePullDownRefresh":false,
"navigationStyle":"custom",
"pageOrientation": "landscape"
}
},
横屏单位问题 因rpx是根据 屏幕的宽度来进行分配的 横屏屏幕宽度变宽 会导致尺寸变大
在style里面 加入如下代码
@function tovmin($rpx){//$rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}
.container{
width:tovmin(70) //此时70和横屏的70rpx尺寸一样
}
后续 在后来的使用中 发现pc中的微信小程序 不能够横屏 这就导致了 pc在横屏中样式出现bug
解决办法 在manifest.json中微信小程序中配置 “resizable” : true 这样就解决了 pc端横屏预览的bug
更多推荐
已为社区贡献4条内容
所有评论(0)