程咬金3斧头
程咬金3斧头
  • 发布:2019-04-28 21:36
  • 更新:2020-10-01 16:58
  • 阅读:3402

解决PC端访问时,页面字体过大导致页面十分丑的问题

分类:uni-app

解决方案很简单,设置下window.innerWidth。
在自定义的h5 template文件head中,加入下面代码。

<script>  
if(window.innerWidth>750){  
    window.innerWidth=750;  
}  
</script>

当然了,这里的750可以自行根据情况调整。

注意,如果某些地方的样式,如果使用了750upx来作为自适应宽度,需要调整成100%。

有更好解决方案的,也希望大家分享下哦。

4 关注 分享
swx 不是发哥 飞翔的熊猫 v***@gmail.com

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft

回复 程咬金3斧头 :
你做的不错。你这个设计,只需要用到match-media和rpx的范围控制。
leftWindow等方案,主要是为了分栏应用,比如pc admin的分栏,或者列表到详情的分栏,点击一侧,这一侧不动,另一侧区域刷新
2020-10-01 16:58
程咬金3斧头

程咬金3斧头 (作者)

回复 DCloud_heavensoft :
方案还可以,但是和传统自适应方案的差别还是大了点。match-media 方案更好理解点。 实际上如果真要做完美的自适应,只需要写自适应css代码就可以了啊,如果还要额外编写html代码,反而难以维护。我最近做了几个 https://www.zhuankestore.com/ 。就是完美自使用的样式。
2020-09-30 16:56
DCloud_heavensoft

DCloud_heavensoft

uni-app已支持pc宽屏,参考https://uniapp.dcloud.io/adapt
2020-09-28 07:10
ijiangruyi

ijiangruyi

为啥我设置了无效
2020-07-18 01:05
uniapp追随者

uniapp追随者

不错,就是还需要对字体document.documentElement.style.fontSize设值,不然有些元素会变形,可参考这篇文章 [uni-app H5 平台在 PC 端实现适配](https://www.lervor.com/archives/24/)
2020-05-22 19:53
uniapp追随者

uniapp追随者

不错,就是还需要对字体document.documentElement.style.fontSize设值,不然有些元素会变形,可参考这篇文章:https://www.lervor.com/archives/24/
2020-05-22 19:49
3***@qq.com

3***@qq.com

不错 ,有效果
2020-04-12 21:19