热门关键字:
jquery > jquery教程 > jquery教程 > uniapp+Html5端实现PC端适配

uniapp+Html5端实现PC端适配

714
作者:管理员
发布时间:2021/5/8 16:43:14
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4671
  前言:


  使用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那样刷新后就回到首页;




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐