在 此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解， 那现在就开始往下阅读吧……
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
根据第一个元标签，文档宽度和设备宽度保留为1:1，文档最大宽度比例为1.0，用户无法单击屏幕进行放大查看。
第二个元标签是iphone设备的safari专用元标签，表示允许以全屏模式浏览。
第三个元标签也是iphone的专用标签，用于指定iphone safari顶部状态栏的样式
第四个元标签告诉设备忽略将页面中的数字识别为电话号码
2、HTML5标签的使用
开始编写WEBapp的时候，哥哥建议前端工程师使用HTML5，并放弃了HTML4。 因为HTML5可以实现HTML4无法实现的丰富的web APP体验，减少开发者的很多工作量。 当然，在使用HTML5之前，您必须知道HTML5的新选项卡的作用。 例如，可以使用section标签来定义内容和文章的区域，直接使用nav标签来定义导航栏和选项卡。
3、放弃CSS float属性
在项目开发过程中，可以遇到内容并排显示的布局。 如果遇到这样的视觉原稿，哥哥建议放弃float，直接使用display:block；
4、利用CSS3边框背景属性
请看这样的按钮
这个按钮有圆角效果，有内嵌效果和高光效果。 这样的按钮不能用CSS3写。 当然，圆角可以用CSS3写，但高亮和内文不能用CSS3写。
此时，请使用-webkit-border-image定义此按钮的样式。
-webkit-border-image是一个复杂的样式属性，最初无法立即理解。 建议阅读有关border-image的文章
5、块级化a标签
请保证将所有数据放入一个a标签中。 为什么？ 因为在触摸手机上，为了提高用户体验，尽量确保用户的可点击区域广泛。
6、自适应布局模式
创建CSS时，不建议前端工程师将容器(无论是外层容器还是内层)的宽度固定。 为了适应各种手持设备，前端工程师建议使用自适应布局模式。 这样就可以在ipad、itouch、ipod、iphone、android、web safarik和chrome上正常显示页面，无需重新考虑设备分辨率。
转载于：https://www.cn blogs.com/zi min 1985/p/3362339.html