用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小程序 })
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥170 如图所示配置eNSP
- ¥20 docker里部署springboot项目,访问不到扬声器
- ¥15 netty整合springboot之后自动重连失效
- ¥15 悬赏!微信开发者工具报错,求帮改
- ¥20 wireshark抓不到vlan
- ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
- ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
- ¥15 stata安慰剂检验作图但是真实值不出现在图上
- ¥15 c程序不知道为什么得不到结果
- ¥15 键盘指令混乱情况下的启动盘系统重装