[TOC] # 移动前端开发需要注意的要点 ## 辅助优化功能 常用的有如下meta标签： ~~~ <meta content="telephone=no,email=no" name="format-detection"> //禁止自动识别电话号码和邮箱 <meta content="yes" name="apple-mobile-web-app-capable"> //苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> //苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。 <meta name="apple-touch-fullscreen" content="yes" /> //苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示 <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /> //苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入 ~~~ ## iPhone、iPad的按钮默认样式 iPhone、iPad的按钮存在默认样式，如何去除默认样式呢？ ```css input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none;} ``` ## IE10下的文本框 在IE10下，当文本框输入内容后，在文本框的右侧会出现一个小叉叉 ```css input::-ms-clear { display: none; } ``` 默认高光样式的处理 功能描述：这个应该并不能算是移动端的兼容问题了，因为很多浏览器（webkit内核）均存在这个问题，对于a标签、聚焦时的input元素都存在这种高光效果。而我们有时候为了用户体验需要修改这种样式（颜色）或者取消这种样式。 解决方法：为webkit内核浏览器增加如下代码。 ```css input:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-wraite-plaintext-only; } ``` ## 元素点击高亮样式的处理 在移动端，出于让用户了解是否点击成功，浏览器会在用户点击一个a标签或者Javascript定义的可点击元素时，出现一个半透明的灰色背景。发明的目的是为了更良好的用户体验，但是这种目的在当前反而成了累赘，大多数的产品都希望能够去掉这个背景。 解决办法很简单： ```css -webkit-tap-highlight-color:rgba(255,255,255,0) ``` 可以同时屏蔽 iOS和安卓点击元素时出现的阴影。`-webkit`表示的是浏览器内核前缀，表示能够应用于所有webkit内核的浏览器（苹果、谷歌等各种主流浏览器以及安卓系统自带的浏览器采用的均是此种内核，但是注意，IE不是），tap表示轻敲、轻触，highlight-color表示的是高亮颜色。rgba是一种全新的（CSS3新增）表示颜色的方式，最后一位表示透明度，将透明度设置为0，在视觉上自然就看不到了。关于浏览器内核以及浏览器内核前缀可以查看《[浏览器内核及内核前缀](https://www.h5course.com/a/20150826301.html)》 # 参考 [https://www.h5course.com/a/20150625215.html](https://www.h5course.com/a/20150625215.html) [https://www.h5course.com/a/20150709246.html](https://www.h5course.com/a/20150709246.html) [most popular CSS Reset](http://cssreset.com/) [http://sentsin.com/web/987.html](http://sentsin.com/web/987.html) [http://sentsin.com/web/54.html](http://sentsin.com/web/54.html) [移动前端知识总结](http://caibaojian.com/mobile-knowledge.html) [移动端制作遇到的坑](http://caibaojian.com/mobile-web-app-fix.html) [html移动端兼容性的调研](https://yuerblog.cc/2017/04/17/html-mobile-compatibility-research/) [移动前端：移动端页面坑与排坑技巧](http://mdsa.51cto.com/art/201412/459525.htm)