前端兼容性问题记录

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 前端兼容性
1、 ios8 h5 通信 不能传带有复杂链接符的字符串(json格式、&),可以用下划线

在移动端开发中,经常需要h5与APP进行交互。这时就需要前端和APP开发人员双方规定一种传输协议。在协议中可以添加与APP交互需要的参数。但是在IOS8系统中,不支持参数中有复杂链接符,比如JSON格式的字符串、&等等。目前为止,下划线是支持比较好的连接符。

2、css3动画兼容写法
animation:loading 2s linear .1s infinite;
-webkit-animation:'loading' 2s linear .1s infinite;
-moz-animation:'loading' 2s linear .1s infinite;
-ms-animation:loading 2s linear .1s infinite;

3、safari中伪元素不支持CSS3动画
在项目中肯定有很多前端开发人员使用css的伪元素属性进行页面构建。虽然这种方式很方便,但是在safari中并不支持伪元素的CSS3动画效果。

4、safari中当一个元素的高度为零时,下边的同级元素的上外边距会覆盖这个元素
在IE、chrome、FF中,即使一个元素的高度为0,也会把它当作块级元素看待,在页面中占据相应的位置。但是在safari中,高度为0的元素会被直接忽略。

5、PC版safari、移动浏览器中当元素绝对定位时,其bottom属性跟标准浏览器解析相反,只能设置top属性定位

6、ios系统中在移动浏览器的页面中按钮加事件,其按钮必须是原生按钮或者有a标签自定义构成

这个问题当时困扰了小编很久,经过一番盘查,终于解决。原来在IOS系统中,浏览器只支持给原生HTML按钮或<a>标签加JS事件。

7、 在移动浏览器中给根元素(例如:html)添加overflow:hidden,只有在原生自带安卓浏览器(例如华为的自带浏览器)中才有效。

overflow:hidden这个CSS样式是大家常用到的。大家用这个样式可以实现很多目的。其中一个常用的就是隐藏内容溢出,把浏览器的滚动条隐藏。这个在PC端浏览中毫无问题。但是除了少数安卓自带浏览器,在大多数移动浏览器中,给根元素(例如:html)添加这个样式就会失效。除非给根元素同时添加有实际数值的高度。为了适应移动端频幕的多种尺寸,只能运用JS动态获取视窗的高度,然后给根元素设置相同的高度,方可把移动浏览器的滚动条隐藏。

8、css3多行文本溢出方法
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;

9、在某些安卓系统手机自带浏览器(例如:华为手机)中,当父级元素是弹性盒子布局时,其子元素的margin-bottom失效,不能撑开父级元素。需要改为设置padding-bottom解决。
这个问题是小编在某个移动项目开发中碰到的。直接将外边距(margin)改为内边距(padding)就可解决。直接上项目实例的截图和链接,供大家参考研究:

Demo地址: http://m.saikr.com/vs

ad8c9146747a02b2a16f2f75f342ca9690ff47fd

 10、在safari中使用Date.parse()解析时间字符串,其格式必须是YYYY/MM/DD HH:MM:SS。


Date.parse() 方法解析一个表示某个日期的字符串,并返回从1970-1-1 00:00:00 UTC 到该日期对象(该日期对象的UTC时间)的毫秒数,如果该字符串无法识别,或者一些情况下,包含了不合法的日期数值(如:2015-02-31),则返回值为NaN。


上述是JavaScript 参考文档的说明。严格来说,其解析的时间字符串必须是YYYY/MM/DD HH:MM:SS。但是,在IE、chrome、FF中,也可以解析YYYY-MM-DD HH:MM:SS或者YYYY.MM.DD HH:MM:SS这两种非标准格式的时间字符串。而safari只能解析标准格式。因此,开发人员在使用这个方法时,最好先把非标准格式转换成标准格式,这样就可以避免兼容问题。

var date = new Date(Date.parse(expireDate.replace(/-/g, "/")));

11、在IOS系统中H5播放器不支持自动播放

在iphone和ipad上用HTML5播放器时,不能自动播放,apple的解释说是为用户节省流量,我觉得这个考虑有点多余。

当时为了解决这个问题,做了些调研,最好的方法就是在IOS系统的浏览器中给页面根元素绑定一次touchstart事件播放流媒体文件,模拟自动播放。

12、 标准浏览器是只认识documentElement.scrollTop的,但chrome却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop

document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,可以这样:
var scrollTop=document.body.scrollTop+document.documentElement.scrollTop;//第一种方式


var scrollTop = document.body.scrollTop > 0 ? document.body.scrollTop : document.documentElement.scrollTop;//第二种方式


var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//第三种方式

13、IOS系统的safari不支持iframe自适应宽度、高度
相关文章
|
移动开发 前端开发 iOS开发
记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端H5的复制功能在ios端的兼容性问题
971 0
|
Web App开发 前端开发 JavaScript
跨浏览器兼容性指南:解决常见的前端兼容性问题
跨浏览器兼容性是前端开发中至关重要的概念。由于不同浏览器(如Chrome、Firefox、Safari等)在实现Web标准方面存在差异,网页在不同浏览器上可能会呈现不一致的结果。因此,确保网页在各种浏览器上都能正确显示和运行,是提供良好用户体验、扩大受众范围以及增强网站可访问性的关键。
|
Web App开发 前端开发 测试技术
前端常见兼容性问题系列7: 部分浏览器不支持音频自动播放
iOS 4.2.1之后的Safari中, 如果没有得到用户的手动允许,即便对audio标签设置了autoplay="autoplay"属性,也不会自动播放音频的,安卓5.0及以上的机器也存在同样问题。去掉audio的autoplay属性,手动点击按钮播放是经过考量后最合适的方法。
4881 0
|
Web App开发 前端开发 测试技术
前端常见兼容性问题系列1:丢失的CSS补间动画
有人说,前端开发的过程常常就是一个不断“入坑”和“出坑”的。这句话道出了前端开发中的磕磕绊绊以及相伴而来的成长。遗憾的是,这些成长大都只存储在工程师的脑海里,日复一日的,相信总有不少人花掉昂贵的时间在重复解决着同样的“坑”。因此,我决心抛砖引玉,先把自己曾遇到的一些兼容性问题分享出来。我将尽量采用“
3041 0
|
19天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
19天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
33 0
|
19天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
19天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
19天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
19天前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT