1、判断手机类型
var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //androidvar isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端2、iphone及ipad下输入框默认内阴影Element{ -webkit-appearance: none;}
3、ios和android下触摸元素时出现半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}
但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。
4、Retina屏的1px边框
Element{ border-width: thin;}
5、顶部状态栏背景色（ios）
设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效。
content 参数：default ：状态栏背景是白色。black ：状态栏背景是黑色。black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
6、设置缓存
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
7、桌面图标
8、IOS中input键盘事件keyup、keydown、keypress支持不是很好
解决方法：可以用html5的oninput事件去代替keyup
9、 百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：
开启电话功能 开启短信功能：
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
10、点击延迟
fastclick可以解决在手机上点击事件的300ms延迟。
zepto的touch模块，tap事件也是为了解决在click的延迟问题。 11、什么是Retina 显示屏，带来了什么问题retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样大小的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2//例如图片宽高为：200px*200px，那么写法如下.css{width:100px;height:100px;background-size:100px 100px;}其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px。 12、webkit表单输入框placeholder的颜色值能改变么？input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;} 13、ios系统中元素被触摸时产生的半透明灰色遮罩
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
14、 关闭iOS输入自动修正
和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：15. 禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：html {-webkit-text-size-adjust: 100%;} 需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 ‘meta viewport’。
16、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：.user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
17、如何禁止保存或拷贝图像（IOS）
- 通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：img { -webkit-touch-callout: none; }
- 移动端定义字体
18、三大手机系统的字体：
ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 默认中文字体是Dengxian(方正等线体) 默认英文和数字字体是Segoe 无微软雅黑字体 各个手机系统有自己的默认字体，且都不支持微软雅黑 如无特殊需求，手机端无需定义中文字体，使用系统默认 英文字体和数字字体可使用 Helvetica ，三种系统都支持。19、webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}20、消除transition闪屏
.css{ -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;}.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 设计高性能CSS3动画的几个要素 a、尽可能地使用合成属性transform和opacity来设计CSS3动画， b、不使用position的left和top来定位
c、利用translate3D开启GPU加速
21、工具推荐
1）. 移动端基础框架
zepto.js 语法与jquery几乎一样，会jquery基本会zepto~ iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~ underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。 fastclick 加快移动端点击响应时间 animate.css CSS3动画效果库2）. 滑屏框架 适合上下滑屏、左右滑屏等滑屏切换页面的效果 slip.js iSlider.js fullpage.js 3）. 瀑布流框架 masonry4）. 其他工具推荐 caniuse 各浏览器支持html5属性查询 paletton 调色搭配