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 */

这里通过条件编