uniapp开发h5页面手机端适配问题

Question

用uniapp开发h5页面，嵌套微信小程序，发现在不同手机端显示的页面样式不一样，怎么适配不同手机端呢？华为 vivo oppo iPhone都是不同样式，有些样式都乱了，有没有解决方案。

Answer 1

以下答案引用自GPT-3大模型,请合理使用：
有的，可以利用终端分辨率来适配不同样式。

方法如下：

在main.js中，加入以下代码：

var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; var orientation = screen.orientation; var uniWeixin = { iphone: { width: 375, height: 667 }, android: { width: 320, height: 480 }, winphone: { width: 480, height: 800 } }; function changeUniWeixin(type) { // 判断手机类型 if (orientation === "portrait") { // 适配华为、vivo、oppo if (type === "iphone") { uniWeixin = uniWeixin.iphone; } else if (type === "android") { uniWeixin = uniWeixin.android; } else if (type === "winphone") { uniWeixin = uniWeixin.winphone; } } else { // 适配iPhone if (type === "iphone") { uniWeixin = uniWeixin.iphone; } else if (type === "android") { uniWeixin = uniWeixin.android; } else { uniWeixin = uniWeixin.winphone; } } } $(document).ready(function() { // 取得终端分辨率并按比例缩放 document.getElementById("uniWeixin").style.width = uniWeixin.width / screenWidth * screenWidth; document.getElementById("uniWeixin").style.height = uniWeixin.height / screenHeight * screenHeight; }); $("#uniWeixin").uniWeixin(); // 引入uniapp小程序 })

Answer 2

布局你用的单位是rpx吗，用rpx自带响应式

Answer 3

按照文档避开这些坑，基本不会有太大区别，像使用rpx，vh使用注意项等等。文档地址如下：
https://uniapp.dcloud.net.cn/matter.html