uniapp pc适配,uniapp pc端自适应
前言：
在PC上显示uniapp制作的h5页面时，发现由于upx单位计算基准值过大，导致页面调度布局紊乱。
思路：
一开始我发现使用px单元不会导致页面布局混乱，反而对刚开始的项目比较友好，修改已经成型的项目成本太高，风险大。而且px是固定单位，在移动端明显不如upx。
后来百度发现很久都没有解决方案。一个偶然的机会，我突发奇想。我能不能在页面加载前用iframe设置宽度为375px(750upx)，以此来欺骗浏览器，欺骗uniapp，让浏览器用基准值375px计算出upx=px的转换比(这个值可以自己按需设置)，然后设置超时为300ms(延迟时间自己实验，300ms不一定是最好的效果。)将iframe的宽度设置为100%，这样在PC端可以用375upx的参考值渲染页面；
说干就干，demo在下面
Pages.json: (iframe是项目的主页，用来判断是移动还是PC，适配PC)
{ Pages :[{ path : Pages/iframe }，{ path: pages/index/index } ]， global Style :{ Navigation Style : custom ，导航栏文本样式: Black ，导航栏标题文本: Demo ， Navigation BarbackgroundColor : # F8 F8 F8 ， background color : # F8 F8 } Pages/iframe page
style lang=scss 。容器{高度：100%；iframe { display:block；宽度：375px身高：100%；不透明度：0；动画：fadeShow .3s缓入前进. 3s；} } @keyframes fadeShow { 0% {不透明度：0；} 100%{不透明度：1；} }/style template view class= container flex justify-center iframe v-if=！ is mobile :src= URL frame border= 0 :style= width: width /iframe/view/template script导出默认值{ data() { return { url: ，width: ，ismobile: true，}；}，onLoad(opt){ this . is mobile=this . is mobile()；设url=页面/索引/索引；//您的主页if(this . is mobile){ uni . redirect to({ URL:`/$ { URL } `})} else { this . URL=` $ { location . href } $ { URL } `；this.width= 375pxsettime out(()={ this . width= 100% ；}，300) } }，onShow() { }，方法：{ isMobile(){ let flag=navigator . user agent . match(/(Phone pad pod iPhone iPod IOs iPad Android Mobile BlackBerry ie Mobile MQQBrowser JUC Fennec wos browser browser ng WebOS Symbian Windows Phone)/I)返回标志？真：假；} } };/脚本缺陷：
当f5刷新页面时，它将返回到初始iframe页面。
2019/11/25更新：
嗯，今天去官方社区逛了逛，发现有大神提出了PC端适配方案，只要几个代码就OK了。突然，我发现我真的很傻，
基于大神的计划修改如下：
创建一个新的pc.js，并把它放在任何地方。内部代码如下(变量sw值的设置，喜欢吗？以下是我根据感觉设置的，适应8K屏幕):
；(function(){ var u=navigator . user agent，w=window.innerWidth如果(！u.match(/AppleWebKit。*手机。*/) u . index of( iPad )-1){ var SW=w * 576/1920；window.innerWidth=sw375？375:SW；window . onload=function(){ window . inner width=w；} }})();然后把pc.js引入main.js
注意，在引入App实例之前必须引入pc.js，否则无效！
导入“@/static/js/PC”从“vue”导入vue“从导入应用程序”。/app 这样做的好处是，页面刷新时，页面前的堆栈还在，不会像iframe一样刷新后回到首页；
至于我上面的计划，就当我没说吧！( , )
2019/11/26更新：
Pc.js修改如下，使Pc端样式可以实现1upx=1rpx=1px；1:1还原设计图纸，非常方便。
当然，如果你的设计不是1920，比如1366，那就把下面改成这样：window . inner width=750 *(w/1366)；
；(function(){ var u=navigator . user agent，w=window.innerWidth如果(！u.match(/AppleWebKit。*手机。*/) u . index of( iPad )-1){ window . inner width=750 *(w/1920)；window . onload=function(){ window . inner width=w；} }})();关于uniapp Html5的PC端适配实现的这篇文章到此为止。更多相关Html5 PC端适配内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。