对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法。在这里我就把我在工作当中遇到的关于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样式兼容总结的更多相关文章

  1. iphone手机不同版本兼容、横竖屏

    /* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pix ...

  2. 排坑·IPhone&IOS中不兼容正则中的断言匹配

    阅文时长 | 1.14分钟 字数统计 | 1834.4字符 主要内容 | 1.问题切入 2.什么是断言匹配 3.断言匹配的替换方案 4.声明与参考资料 『排坑·IPhone&IOS中不兼容正则 ...

  3. 禁用iPhone手机浏览器上给电话号码自动加上的link样式

    iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话号码的数字 加上link样式. 可以添加下面的meta禁用掉这个功能. // //

  4. 禁用iPhone手机浏览器上给电话号码自动加上的link样式(苹果手机自动给手机号加样式)

    原文地址:http://blog.csdn.net/atec2000/article/details/44631633 iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话 ...

  5. Dcloud开发webApp踩过的坑

    Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...

  6. 微信支付之手机H5支付实践

    最近项目中支付部分涉及到微信支付,使用的是h5支付,官方文档中是没有demo的,所以摸着石头过河,将踩过的坑记录如下. 一 应用场景 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前 ...

  7. 那些移动端web踩过的坑

    原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变 ...

  8. 那些年踩过的坑之:first-child伪类选择器

    原文:那些年踩过的坑之:first-child伪类选择器 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器.——w3school 嗯,乍一看好像说的不是很明白,因此这个选择 ...

  9. iphone手机中对于html和css的一些特殊处理

    1.iphone safari iso系统不兼容:hover的解决办法: 方法一: a:hover设置的样式在IOS系统的浏览器内显示不出来,看来是IOS系统的移动设备中,需要在按钮元素或者是body ...

随机推荐

  1. React Native & debug & debugger

    React Native & debug & debugger http://localhost:8081/debugger-ui/ react-devtools # yarn: $ ...

  2. Fiddler-学习笔记-远程抓包

    1 操作系统低于win7用 fiddler 2 win7 或win7以上版本,用 fiddler4片本 2 fiddler开关:左下角或点击F12控件fiddler开关,开=capturing 3 启 ...

  3. adoquery怎样判断数据在缓存中有修改啊

    ADOQry.Filtered:=false;       ADOQry.Filtered:=true;       ADOQry.FilterGroup:=fgPendingRecords ;Fil ...

  4. JavaScript简单简介

    JavaScript,男,web页面的一种脚本编程语言,1955年诞生,妻子为HTML,魔法能力是将静态页面(经过与用户交互与相应)转变为动态页面. 刚进入浏览器市场(魔界)的时候,也就是js1.0岁 ...

  5. NetScope脱机(localhost)使用[转】

    https://blog.csdn.net/jiwu999/article/details/79626773 方法: step1:git clone https://github.com/ethere ...

  6. codeforces707C

    Pythagorean Triples CodeForces - 707C 悉宇大大最近在学习三角形和勾股定理.很显然,你可以用三个边长为正数的线段去构造一个直角三角形,而这三个数被称作“勾股数”. ...

  7. 部署crm项目

    准备工作 使用xftp将项目传到linux 将knight 传到linux上 将项目的数据导出 mysqldum -uroot -p --all-database > alldb.dump 在w ...

  8. Spring Boot自动配置与Spring 条件化配置

    SpringBoot自动配置 SpringBoot的自动配置是一个运行时(应用程序启动时)的过程,简化开发时间,无需浪费时间讨论具体的Spring配置,只需考虑如何利用SpringBoot的自动配置即 ...

  9. Codeforces555 B. Case of Fugitive

    Codeforces题号:#310B 出处: Codeforces 主要算法:贪心+优先队列 难度:4.6 思路分析: 这道题乍一看没有思路…… 考虑贪心的做法.首先预处理出每两座相邻的桥之间边界相差 ...

  10. FFT算法小结

    都应该知道多项式是什么对吧(否则学什么多项式乘法) 我们用\(A(x)\)表示一个\(n-1\)次多项式,即\(A(x)=\sum_{i=0}^{n-1} {a_i}*x^i\) 例如\(A(x)=x ...