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_uni-app H5 平台在 PC 端实现适配相关推荐

手机端（APP点灯blinker）-PC端（Node-red）-设备端（ESP32）-客户端（MQTTX客户端）四者之间的通信——通过MQTT通信（上）
手机端(APP点灯blinker)-PC端(Node-red)-设备端(ESP32)-客户端(MQTTX客户端)四者之间的通信--通过MQTT通信(上) 前言: 本次实验是通过MQTT来进行手机端-设 ...
多平台视频PC端下载(持续更新，windows)
多平台视频PC端下载(持续更新,windows) 说明:仅供学习交流使用,请勿用于商业用途,如有侵权,请联系删除!使用过程中请尊重版权! 文中所用的视频下载器不止用于单一平台,大部分支持多平台,可自行 ...
微信支付—微信H5支付「PC端扫码支付」
前言微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付微信支付-PC端扫码支付「本文」本篇是微信支付系列的第三篇,PC端扫码支付. 开发环境:Java + SpringBoot ...
cocos creator屏幕适配fitHeight / fitWidth，手机端竖屏，pc端浏览器适配，pc分辨率全屏适配，血条跟随的适配
一,使用creator3.3.2 分别实现手机端和浏览器的适配效果如下打包web-mobile(居然会有这种需求 /流汗!) pc浏览器显示手机端显示 1.首先在项目中设置分辨率和默认适配这里 ...
pc端rem适配_自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
pc端rem适配_浅谈pc端rem字体设置的问题
1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTO ...
一段代码把PC端页面适配手机端
在PC端的代码中加入这段代码,及实现手机端页面的自适应,是个人目前觉得最好用的方法! <script type="text/javascript"> ...
PC端页面适配px转rem
rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小. 一般设计稿都是px单位,在开发的时候也会用到px单位.如果在开发前,可以利用vscod ...
android 从服务端获取的图片怎么适配不同分屏幕的手机,移动端的适配|切图|标注...
年前最后一个工作日,完成这篇干货- 这篇文章的目的是想从更深的原理层去找到一些设计规范的原因,比如为什么要选用@2x的750*1334做基础设计稿? 开发拿到设计基础稿是如何操作适配的? 基础稿是如何 ...

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

uniapp适配pc_uni-app H5 平台在 PC 端实现适配相关推荐

最新文章

热门文章