前言：

 

　　使用uniapp做的h5页面，在PC端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱

 

　　思路：

 

　　刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px是固定单位，在移动端显然没upx好使；

 

　　后来百度好久，发现都没有解决办法，偶然间突发奇想，能不能利用iframe在页面载入前将宽度设置为375px（750upx），来达到欺骗浏览器，欺骗uniapp，让浏览器以375px（这个值可以自己按需设置）基准值来计算upx=>px转换比，然后setimeout 300毫秒（延迟时间自己试验吧，不一定300ms效果最好）将iframe宽度设置为100%，这样一来在PC端就可以实现以375upx基准值渲染页面了；

 

　　说干就干，demo在下面

 

　　pages.json: （iframe为项目首页，用来判断是移动端还是PC端，并对PC端做适配处理）

 

　　pages/iframe页面

 

　　缺陷：

 

　　f5刷新页面时又会回到iframe初始页面

 

　　基于大神的方案修改了下：

 

　　新建一个pc.js，随便找个地方放着，内部代码如下（变量sw值的设置，你们觉得怎么好看怎么来吧，下面的是我根据我的感觉设置的，适配到8K屏幕了）：

 

　　然后再main.js里面引入pc.js

 

　　注意，pc.js一定要在App实例引入前引入，不然无效！！！

 

　　这样做的好处是刷新页面时，页面之前的栈还在，不会像用iframe那样刷新后就回到首页；