qq_42149250 2023-02-10 01:25 采纳率: 92.6%
浏览 77
已结题

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

用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小程序 })

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 已采纳回答 2月10日
  • 创建了问题 2月10日

悬赏问题

  • ¥20 请问,这个视频播放软件的名称
  • ¥15 运筹优化,gurobi,python
  • ¥15 基于python的电影系统推荐
  • ¥20 springmvc重定向和返回json
  • ¥15 数学建模——参会安排怎么做
  • ¥15 电脑键盘实现触摸功能
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格
  • ¥15 大家帮我看看为什么错了