uniapp适配pc_uni-app H5 平台在 PC 端实现适配

该文章已过时,请忽视。从 uni-app 2.9 起,官方已提供了 PC 等宽屏的适配方案。

使用 uni-app 开发的 H5 页面,为了根据屏幕宽度自适应,我们一般都采用官方推荐的动态单位 rpx,但是在 PC 端展现的时候可能出现文字等相关元素太大,导致页面错乱或不美观。

为了解决该问题,我们可以限定页面最大宽度,超过就固定宽度,并居中显示。

比如 笔者 要开发一个 uni-app 应用,在 PC 端当浏览器可见宽度超过 375px 时,页面固定宽度 375px,并居中显示。具体步骤如下:

去掉 H5 端页面原生导航栏

在 pages.json 文件中,pages->style->h5 节点中 titleNView 设置成 false。{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "uni-app",

"h5": {

"titleNView": false

}

}

}

限制 H5 端页面宽度

在 App.vue 文件中, 中增加相应的样式,控制页面最大 375px 且居中显示。/* #ifdef H5 */

body {

max-width: 375px;

margin: auto;

}

/* #endif */

这里通过条件编译限制了该样式只在 H5 端生效。

自定义模板

工程根目录下新建一个 html 文件,从

document.addEventListener('DOMContentLoaded', function() {

document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'

})

Please enable JavaScript to continue.

根据页面宽度,限制 rpx 对应字体等元素编译后的 px 大小

修改上面模板中的 中的内容,修改成如下代码:

document.addEventListener('DOMContentLoaded', function() {

window.innerWidth = Math.min(window.innerWidth, 375)

document.documentElement.style.fontSize = window.innerWidth / 20 + 'px'

})

该部分为本文的核心,网络上比较难找,暂时还没找到其他的解决方式。如有更好的解决方案,欢迎留言交流。另外,可根据实际情况搜索全文中的 375 替换成其他限定宽度。

假设浏览器宽度 600px(大于 375px 的任意宽度),设置了页面最大宽度 375px,“文字大小测试”字体为48rpx,最终demo运行效果如下(html节点最大字号被限定为375/20=18.75px,“文字大小测试”最大字号被限定为48rpx/750*375=24px):

另外,也可以用嵌套 iframe 的方式来实现,具体可以看

该文章已过时,请忽视。从 uni-app 2.9 起,官方已提供了 PC 等宽屏的适配方案。版权属于:瞭月

版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。

你可能感兴趣的:(uniapp适配pc)