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

    资源来自论坛里的:http://www.miui.com/thread-6449305-1-1.html 首先需要刷入TWRP,资源在这个帖子里:http://www.miui.com/thread- ...

  2. javascript帧动画

    前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...

  3. 集成Javascript Logging on MVC or Core

    ASP.NET Core provides us a rich Logging APIs which have a set of logger providers including: Console ...

  4. 5G到来,数据中心如何变革?

    导读 5G将要到来,除改变人们的工作生活外,其带宽.延时.连接特性也逼迫着数据中心变革,以满足5G时代需求.具体而言,5G将从形状规模.硬件组成及软件规模三面变革数据中心. 5G带来什么 高带宽.低延 ...

  5. BZOJ4849[Neerc2016]Mole Tunnels——模拟费用流+树形DP

    题目描述 鼹鼠们在底下开凿了n个洞,由n-1条隧道连接,对于任意的i>1,第i个洞都会和第i/2(取下整)个洞间有一条隧 道,第i个洞内还有ci个食物能供最多ci只鼹鼠吃.一共有m只鼹鼠,第i只 ...

  6. CodeForces615B-Longtail Hedgehog-dp/图

    记忆化数组记录从这个点的最长下降序列,然后乘以这个点的度,就是ans,维护即可. #include <cstdio> #include <cstring> #include & ...

  7. 洛谷P1038神经网络题解

    题目 这个题不得不说是一道大坑题,为什么这么说呢,这题目不仅难懂,还非常适合那种被生物奥赛刷下来而来到信息奥赛的学生. 因此我们先分析一下题目的坑点. 1: 题目的图分为输入层,输出层,以及中间层. ...

  8. Python里format()方法基本使用

    '''第一种:自然连接''' #format 连接字符串 str = '{}使用的python是{}版本'.format('我','3.6.5') print(str) #打印结果:我使用的pytho ...

  9. Git Bash的妙用 - 使用Linux命令

    如何在Windows中使用Linux命令? 网上有很多说是安装CygwinPortable 在cmd 窗口下是用linux 命令,但是还有一些缺陷. 其实对于程序员来说有一个非常简单有效的方法,那就是 ...

  10. require.js基本用法

    1.require.js的加载 使用require.js的第一步,是先去官方网站下载最新版本. 下载后,假定把它放在js子目录下面,就可以加载了. 1 <script src="js/ ...