1、为了响应式开发web，也就是说页面必须适应画面大小。 可以采用流体布局，例如上一篇文章(自适应宽度布局)，也可以通过媒体查询解决其他具体的小问题(IE支持css3媒体查询以实现响应式网页设计和css3媒体查询)
2、手机大多是高级浏览器，可以使用html5 css3开发
3、合理灵活地使用元标签。 具体如下。
根据第一个元标签，文档宽度和设备宽度保留为1:1，文档最大宽度比例为1.0，用户无法单击屏幕进行放大查看。
第二个元标签是iphone设备的safari专用元标签，表示允许全屏模式下浏览，并隐藏浏览器导航栏。
第三个元标签也是iphone的专用标签，用于指定iphone safari顶部状态栏的样式
第四个元标签告诉设备忽略将页面中的数字识别为电话号码，如果需要单独识别，可以打开a href=“tel 336013030303030”130303030/a”
其他常见mate标签：
4、必须注意链接的大小。 因为很多都是触摸屏手机，所以必须让用户能够简单地点击标签。 (我以前看过文章，但现在找不到出处。 最小42px*42px似乎) ) :
操作对象的大小与手指的操作相符，键的大小设定如下。
食指的点击间隔约为7*7 mm、1mm，
按8*8 mm、2mm间距单击拇指。 目前推荐值为9mm大小，最小值不得小于7mm。
当然，一些重要的操作和经常单击的区域可以设置得稍大一些。
5、为了优雅的降级(平稳的恶化)，不使用JS。 因为很多APP在默认情况下被设置为3G不会自动下载图像等资源，所以当用户希望禁止下载JS或图像时，页面上也会出现价值。)。
6、关于图像的处理，设置宽度来适应图像，防止图像变形就可以了。 当然，如果兼容设备的分辨率差异较大，则需要利用媒体查询根据分辨率的不同加载不同的图像(需要在相同的设置中设置几个不同的标准)，一是小分辨率的设备加载较大的图像，浪费流量
7、如果分辨率太小，过于拥挤无法显示普通模块，可以使用媒体查询根据分辨率适当地显示或隐藏模块。 例如，768px的2列布局、320px的1列布局等。
8、当然也可以根据判断跳到每个终端不同的URL。
9、手机浏览器多而乱，而且手机系统的默认处理方法也不一样，兼容性问题比PC版稍微简单一点，需要总结常用的处理方法；
10、由于流量对手机、平板电脑的移动终端至关重要，因此webapp中的class和id命名应尽量设置为断点。 例如，可以命名为头部为hd，中间为bd，底部为ft等。 (该提案被搁置，为了考虑后期维护是否方便等问题) )。
具体的经验建议：
1、- WebKit-tap-highlight-color : rgba (255、255、255、0 )可以同时遮挡在ios和android中单击元素时出现的阴影。
注： transparent属性值在android中无效。
2、-webkit-appearance:none同时屏蔽输入框奇怪的内阴影，可以解决iOS无法修改按钮样式的问题。 测试还发现了一个小问题，即在添加以上属性后，iOS缺省为圆角，但可以使用border-radius属性进行修复。
3、- WebKit-transform : translate 3d (0，0，0 ) )可以在ios中使动画更加流畅(该属性调用硬件加速模式，JS引擎很多看不见的bug就是这个原因。
4、@-webkit-keyframes可以预定义很多你想的视频，用-webkit-transition调用。
5、-webkit-background-size可以制作高清图标，但部分低版本的安卓只能识别background-size，需要两者都写； 使用此属性时，建议使用cover值。 可以自动使宽度和高度一致。
6、border-radius、box-shadow、gradient、border-image，无需说明即可简化代码。
7、安卓、ios4以下，固定宽度/高块级元素的overflow:scroll/auto无效，是浏览器bug，可以通过第三方工具实现。
8、ios5可以在scroll to (0，0 )中自动隐藏浏览器地址栏。
9、css3动画会影响自动对焦，请在动画执行前进行自动对焦，或者直接舍弃。
10、如果域外链较多，DNS Prefetching会帮你进行DNS预分析。
11、如果你的网站想在SNS上推广更多，Open Graph Protocol适合你。
12、使用iScroll时，不能使用：focus{outline:0}假货。 否则幻灯片会堵塞。
13、IOS禁止横屏时，字体变大，- WebKit-text-size-adjust 3360 none；
14、iphone的Retina显示器的css数值都必须是2倍，包括图像的大小在内都是2倍。 Retina显示器很精致，很容易理解为Retina显示器的一个像素相当于普通的两个像素。
15、解决闪屏，- WebKit-back face-visibility 3360隐藏； - WebKit-transform-style : preserve-3d；
16、触摸事件使用touch系列。 请勿用click代替；
17、关于电量，JPEG最省电(JPEG(PNG ) GIF )，图像数约多，约耗电、AJAX动态内容耗电、reflow和repaint耗电、webGL和translate3d耗电
资料来源： http://toutiao.com/a 5235371959/id=2972853491 app=news _ article TT _ from=mobile _ QQ UTM _ source=mobile _ mobile