以下只是我个人的总结。如果你有更好的建议，请留言，一起鼓励进步！- -!
1.响应性开发web，即页面必须适应屏幕大小，可以采用流体布局，比如上一篇文章(自适应宽度布局)，其他具体小问题可以通过媒体查询解决(让IE支持CSS3 Media Query实现响应性Web设计和CSS3媒体查询)；
2.因为大部分手机都是高级浏览器，可以用html5 css3开发；
3.合理灵活地使用元标签，如下所示：
第一个元标签表示强制保持文档宽度和设备宽度为1，333，601，文档最大宽度比1.0，不允许用户点击屏幕放大；
第二个元标签是iphone设备中的safari私有元标签，意思是：允许全屏浏览，隐藏浏览器导航栏；
第三个元标签也是iphone的私有标签，指定iphone中safari顶部状态栏的样式；
第四个元标签表示：告诉设备忽略将页面中的号码识别为电话号码，并按如下方式打开：a rel="external nofollow" href=" tel :13030303030 " 130303030/a用于个人识别。
其他常见的配对标签：
4.一定要注意链接的大小，因为大部分都是触屏手机，这样用户可以轻松点击标签(我之前看过文章，但是现在找不到来源，好像最低是42px * 42px*42px):
操作对象的大小符合手指的操作，按键的大小设置规范：
食指点击之间的距离约为7*7毫米，1毫米，
用拇指点击8*8 mm，间距2mm。当前推荐值为9毫米，最小值应不小于7毫米。
当然，一些重要的操作或者经常点击的区域可以设置的稍微大一点。
5.做好优雅降级(稳降级)，少用JS和图片，页面能体现出禁止用户下载JS和图片时的价值(因为很多app默认为3G，不会自动下载图片等资源)。
6.对于图片处理，只要设置宽度，使图片自适应，防止图片失真，当然，当兼容设备的分辨率差距较大时，就需要使用媒体查询，根据不同的分辨率加载不同的图片(同一张图片需要设置几个不同的规格)。首先，需要防止小分辨率设备加载大图片时的流量浪费，其次，需要防止大分辨率设备加载小图片导致的图片模糊。
7.如果设置的分辨率太小，正常模块太拥挤，可以使用媒体查询，根据合适的分辨率显示或隐藏模块，例如在768px显示2列布局，在320px显示1列布局。
8.当然，不同的终端可以根据判断跳转到不同的网址。
9.手机浏览器多且混乱，手机系统默认的处理方式也不一样。兼容性问题并不比PC版简单，所以要总结一下常用的处理方法。
10.对于手机平板的移动终端来说，流量是非常重要的，所以webapp中类和id的命名要尽量打破，比如头部可以命名为hd，中间为bd，底部为ft等。(这个建议待定，因为方便后期维护等。);
具体经验和建议：
1.-WebKit-tap-highlight-color : rgba(255，255，255，0)可以在同时点击ios和android下的元素时遮挡阴影。
注意：透明的属性值在安卓下无效。
2.-WebKit-apparence : none可以同时屏蔽输入框怪异的内影，解决了iOS下无法修改按钮样式的问题。测试还发现了一个小问题，就是添加了上述属性后，iOS的默认还是有圆角的，但是可以使用边框半径属性进行修改。
3.-WebKit-Transform : translate 3d(0，0，0)可以让ios下的动画更流畅(这个属性会调用硬件加速模式，不需要浏览器内核通过JS引擎直接渲染)，但是在安卓下不能乱用，这也是很多bug之前没见过的原因。
4.@-web kit-关键帧可以预定义许多你想到的动画，然后通过-webkit-transition调用它们。
5.-webkit-background-size可以作为高清图标使用，但是一些较低版本的android只能识别background-size，所以两者都要写。使用此属性时，建议使用cover的值，它可以自动匹配宽度和高度。
6、边框-半径、框-阴影、渐变、边框-图像，无需解释，可以简化代码。
7.对于安卓、ios4及以下，固定宽/高块级元素overflow:scroll/auto无效，属于浏览器bug，可以借助第三方工具实现。
8.ios5可以通过sc
rollTo(0,0)来自动隐藏浏览器地址栏。9、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。
10、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。
11、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。
12、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。
13、IOS禁止横竖屏时字体变大，-webkit-text-size-adjust: none;
14、iphone的Retina显示屏的css中的数值都得翻倍，包括图片大小也得翻倍，Retina显示屏精致，可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
15、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、触摸事件用touch系列，不要用click替代；
17、关于电量，JPEG最省电（JPEG>PNG>GIF）,图片数量约多，约大约耗电，AJAX动态内容耗电，reflow和repaint耗电，webGL和translate3d耗电
《前端观察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号，也可以关注微信订阅号qianduanguancha（长按可复制）