踩过的坑—iphone手机H5样式兼容总结

对一个前端开发者来说，最煎熬的莫过于"兼容"两个字了（说到这个词朋友们是不是身体一抖），哪怕对于工作多年的老油条来讲，也不是完全了解各种场景下的兼容性处理方法。在这里我就把我在工作当中遇到的关于iphone手机h5页面的兼容性处理和大家分享一下。

html,body{ -webkit-text-size-adjust: none; } // 当需要在中文版chrome浏览器中显示小于12px的字体时，而且此时页面放大效果会被阻止

html,body{ -webkit-tap-highlight-color: rgba(0,0,0,0); } // 去掉苹果手机点击瞬间出现的灰色背景

input{ -webkit-appearance: none; } // 去除苹果手机默认的input样式（默认样式可丑了ಥ﹏ಥ）

selector{ cursor: pointer } // 给IOS系统里cursor不为pointer的元素添加事件时会不同程度受影响，加上cursor: pointer可解决

img{ pointer-events: none; } // 阻止图片在微信里被点击放大

……

好了，能力有限，目前遇到的就这么多，当然兼容性问题还有千千万，欢迎大家来补充~

踩过的坑—iphone手机H5样式兼容总结相关推荐

用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正 ...
去除iPhone手机浏览器上给电话号码自动加上的link样式
iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给像是电话号码的数字加上link样式. 可以添加下面的meta禁用掉这个功能. <meta name="form ...
解决iPhone手机音乐不能自动播放问题
在做h5开发的时候需要插入背景音乐,使用 html 的 audio 标签可以实现,但是在开发过程中发现iPhone手机打开h5页面时音乐并不会自动播放,而是要点一下屏幕才会自动播放,上网找了半天,各 ...
AWS Device Farm介绍及Appium踩过的坑
本文记录了在AWS Device Farm上进行Appium TestNG进行手机应用UI自动化测试的流程及遇到的问题,及具体的解决方法.同时记录了使得测试脚本更稳定的一些代码写法. Device F ...
前端页面布局常见问题/已踩过的坑大杂烩
目录一.IE8下[图片加文字]展示时自动换行的问题二.设置了z-index无效三.当文字超出范围时自动补...省略号四.实现垂直居中五.实现无缝十字边框六.Iphone APP Webvi ...
ios中html2canvas正式包空白,html2canvas 部分iphone手机机型出现空白
html2canvas转canvas后,部分iphone手机机型出现空白. 测试的机型及结果: 1.iphoneX 系统11.3.1 空白 2.iphone6p 系统9 空白 3.iphone6s 系 ...
html2canvas 苹果手机,html2canvas 部分iphone手机机型出现空白
html2canvas转canvas后,部分iphone手机机型出现空白. 测试的机型及结果: 1.iphoneX 系统11.3.1 空白 2.iphone6p 系统9 空白 3.iphone6s 系 ...
html2canvas苹果6出错,html2canvas 部分iphone手机机型出现空白
html2canvas转canvas后,部分iphone手机机型出现空白. 测试的机型及结果: 1.iphoneX 系统11.3.1 空白 2.iphone6p 系统9 空白 3.iphone6s 系 ...
java项目经理也就那么回事_网易PM | 我们之前在需求评审环节踩过的坑...
原本觉得需求评审也就那么回事儿,大家应该都差不多这么做的,没啥好说的.不过前不久有一位同学问起来我们是怎么做需求评审的,然后发现有一些团队的做法可能还不大一样,他们也还踩着我们之前踩过的坑,他们还在探 ...

踩过的坑—iphone手机H5样式兼容总结

踩过的坑—iphone手机H5样式兼容总结相关推荐

最新文章

热门文章