用uniapp开发h5页面,嵌套微信小程序,发现在不同手机端显示的页面样式不一样,怎么适配不同手机端呢?华为 vivo oppo iPhone都是不同样式,有些样式都乱了,有没有解决方案。
3条回答 默认 最新
- GISer Liu 2023-02-10 02:27关注
以下答案引用自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小程序 })
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 网络科学导论,网络控制
- ¥15 metadata提取的PDF元数据,如何转换为一个Excel
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错
- ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
- ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
- ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
- ¥50 如何openEuler 22.03上安装配置drbd
- ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
- ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)