uniapp追随者
uniapp追随者
  • 发布:2020-05-22 20:04
  • 更新:2024-09-07 15:21
  • 阅读:7197

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

分类:uni-app

使用uni-app开发的H5页面,为了根据屏幕宽度自适应,我们一般都采用官方推荐的动态单位rpx,但是在PC端展现的时候可能出现文字等相关元素太大,导致页面错乱或不美观。

解决方案很简单,在自定义的h5 template文件head中,修改<script></script>中的代码:

<script>  
    document.addEventListener('DOMContentLoaded', function() {  
        window.innerWidth = Math.min(window.innerWidth, 750)  
        document.documentElement.style.fontSize = window.innerWidth / 20 + 'px'  
    })  
</script>

具体也可以查看这篇文章:uni-app H5 平台在 PC 端实现适配

1 关注 分享
2***@qq.com

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 冉娃娃 :
<!-- <script>
if (window.innerWidth > 768) {
document.querySelector('#app').remove();
const iframe = document.createElement('iframe');
iframe.src = location.href;
iframe.width = '375px';
iframe.height = '736px';
document.body.appendChild(iframe);
document.body.style.display = "flex";
document.body.style.justifyContent = "center"; // 水平居中
document.body.style.alignItems = "center"; // 垂直居中
document.body.style.height = "100vh"; // 设置 body 高度占满整个视口
document.body.style.margin = "0"; // 去掉默认的 margin
}
</script> --> 可以居中一下
2024-09-07 15:21
DCloud_heavensoft

DCloud_heavensoft

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

冉娃娃

index.html修改成如下代码即可

```
<div id="app"></div>
<script>
if (window.innerWidth > 768) {
document.querySelector('#app').remove();
const iframe = document.createElement('iframe');
iframe.src= location.href;
iframe.width = '415px';
iframe.height = '736px';
document.body.appendChild(iframe);
}
</script>
```
2020-09-23 15:51
LetmeCode

LetmeCode

回复 9***@qq.com :
你这个后来怎么解决的,在其他页面中引入吗
2020-09-04 10:19
LetmeCode

LetmeCode

为什么我这边设置了没有效果
2020-09-04 10:16
阿赖

阿赖

回复 9***@qq.com :
有什么方案能解决么
2020-08-03 16:49
ijiangruyi

ijiangruyi

回复 9***@qq.com :
我也是
2020-07-18 01:05
ijiangruyi

ijiangruyi

为啥我设置了无效
2020-07-18 01:05
9***@qq.com

9***@qq.com

请问下app.vue里使用imoprt引入css文件时文字依旧会超大,有什么方案能解决么
2020-06-23 14:36