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

    pycharm 1.模板 file->setting->Editor->file and code template->python script->右上方 #!/usr ...

  2. Delphi之TComponent类

    TComponent类 TComponent类直接由TPersistent派生.TComponent的独特特征是它的属性能够在设计期间通过ObjectInspector来控制,能够拥有其他组件.非可视 ...

  3. Promise是什么?

    一. Promise是什么? Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来. 避免了多级异步操作的回调函数嵌套. Promise最早 ...

  4. jdbc工具类2..0

    一.创建外部文件 url=jdbc:mysql:///qy66 use=root password=root driver=com.mysql.jdbc.Driver 二.创建工具类 package ...

  5. react用构造函数创建组件

    有两种方法,一种是通过构造函数创建,一种是通过class创建 1.构造函数创建组件 用function+组件名的方式创建,创建好了,在render里面以标签的形式一丢就可以啦!但是这种方式必须要ret ...

  6. 学习 Spring (五) Aware 接口

    Spring入门篇 学习笔记 Spring 中提供了一些以 Aware 结尾的接口,实现了 Aware 接口的 bean 在被初始化之后可以获取相应资源 通过 Aware 接口,可以对 Spring ...

  7. tomcat9 点击bin目录下的startup.bat一闪而过

    我装的是tomcat9免安装版,jdk版本是11,之后去tomcat bin目录下点击startup.bat闪退(好吧,只有想办法解决了) 博客中的解决办法五花八门,什么环境变量没配好....不过都不 ...

  8. codeforces616B

    Dinner with Emma CodeForces - 616B Jack decides to invite Emma out for a dinner. Jack is a modest st ...

  9. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  10. 字符串哈希及KMP

    字符串很神奇,因为它在计算机中应用很广泛,就每一个程序都需要用到字符串,所以学好字符串是非常重要的. 接下来就介绍两个字符串的基本操作 1:字符串hash  一种可以查找几个字符串有几个不同的字符串. ...