前端vue/uniapp —— 兼容ios与安卓问题

这篇具有很好参考价值的文章主要介绍了前端vue/uniapp —— 兼容ios与安卓问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.flex布局中justify-content/align-items: end;ios不生效问题

// 把end 改为 flex-end
justify-content: flex-end;
align-items: flex-end;

2.文字溢出显示省略号——富文本在ios真机不生效

① css样式无效:安卓可,ios不可


.multiWrap {
  word-wrap: break-word; 
  display:-webkit-box; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  word-wrap:break-word; 
  -webkit-line-clamp:2; 
  -webkit-box-orient:vertical;
}

② 富文本外层包裹:安卓可,ios不可


<div style='display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;line-clamp: 3;overflow: hidden;height: 120rpx;'>{{富文本内容}}</div>

③ 提取富文本文字后加css样式:安卓可,ios可,不完美的解决办法


// 提取富文本文字+长度截取
function truncateHTML (htmlText, limit, indicator) {
  var tempDiv = document.createElement('div')
  tempDiv.innerHTML = htmlText
  var text = tempDiv.textContent || tempDiv.innerText || ''

  if (text.length > limit) {
    text = text.substring(0, limit) + (indicator || '...')
  }
  return text
}

.multiWrap {
  word-wrap: break-word; 
  display:-webkit-box; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  word-wrap:break-word; 
  -webkit-line-clamp:2; 
  -webkit-box-orient:vertical;
}

文章来源地址https://www.toymoban.com/news/detail-601119.html

到了这里,关于前端vue/uniapp —— 兼容ios与安卓问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面,不想重新开发,想要直接放进项目用

    2024年02月09日
    浏览(54)
  • uniapp 蓝牙小程序-兼容安卓和iOS

    withTimeout方法可以在搜寻设备时等待指定的秒数,如果30秒内未搜索到则取消搜索  计算数据校验和: 校验字节等于命令字节与所有数据字节之和的反码。求和按带进位加 (ADDC)方式计算,每个进位都被加到本次结果的最低位(LSB)。 vue页面代码   js函数代码 

    2024年02月03日
    浏览(40)
  • uniapp图片或文件的预览和下载,兼容ios+安卓+浏览器+企业微信H5

    在uniapp的APP日常开发中,我们时常遇到一些兼容性问题,正如本文所提到的图片的预览和下载。在此功能的开发中,我常遇到以下四个问题: 图片预览功能实现,但是PDF,word,xls文件无法打开。 安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打

    2023年04月10日
    浏览(43)
  • 【H5】H5安卓、ios兼容性问题

    H5在安卓机型和IOS机型或者相同机型的不同浏览器中的某些样式会存在不一样的表现,所以需要解决相应的兼容性问题 1、IOS端兼容input光标高度 问题症状:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样

    2024年02月16日
    浏览(56)
  • 安卓和ios针对于new Date()数据格式的兼容问题

    IOS 手机不识别 YYY-MM-DD HH:mm:ss 格式的日期传参。 在项目中需要实现倒计时,这个倒计时的时间是后端同学给到前端的,我们针对当前时间到结束的时,进行倒计时,这个功能在测试的时候安卓手机和iOS手机都没问题,但是哦生产有用户反馈ios手机无法出现倒计时 发现是ios低版本的情

    2024年02月04日
    浏览(38)
  • uniapp 完美解决苹果和安卓 input 框遮挡兼容问题

    需求描述 小程序项目用到IM即时通讯功能,苹果和安卓出现input输入框被软键盘遮挡的情况。 效果展示 解决问题 HTML部分(结构很重要) CSS部分 JS 部分 具体怎么回事,尝试将Demo运行起来就差不多理解了。 点赞 评论 收藏 ~~ 留言讨论,如有错误,也希望大家不吝指出。 ~~ 点

    2024年02月12日
    浏览(55)
  • uni-app vue3 封装socket 兼容微信小程序 钉钉小程序 H5 App 全局唯一

    前端小伙伴使用uni-app开发长连接通信的时候都会有以下疑问 在网上搜到的封装socket都没讲怎么全局公用一个呢? 同一个 子协议或者我我们叫type类型型我想在两个页面都接受使用怎么做呢? 目前能搜到的socket 封装好像都没讲清楚这个东西,或者压根没考虑 下面给大家详细

    2024年02月13日
    浏览(60)
  • H5项目中使用微信JS-SDK(以H5项目批量上传图片为例,兼容IOS及安卓)

    H5项目中使用微信图片上传相关sdk,主要用于解决 1.安卓手机无法一次选择多张图片进行上传问题;2.控制IOS系统手机一次可无限量选择图片上传的问题 一、准备工作:公众号配置 验证所需使用的sdk是否符合需求 可在使用场景中,打开微信官方提供的 微信SDKDemo 链接,或企业

    2024年02月07日
    浏览(48)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(47)
  • 前端基于uniapp[uniPush]实现APP消息推送(安卓、IOS)

    前提概述:此文章都是基于uniapp中uniPush2实现的在线、离线推送 登录开发者中心先填写好项目信息以及配置厂商 在manifest.json文件中勾选推送模块 打包自定义基座 在前端项目中创建云函数(此云函数的作用是接受后台发送的消息模板,解析出来后,发送给到uniapp后台,以此触

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包