（十）移动端前端开发-开发技巧

一、meta相关

  webkit内核中有一些私有的meta标签，这些meta标签在开发中webapp时起到非常重要的作用。

<!--设置状态栏的背景颜色（iOS）-->
<!--
1.black:状态栏背景是黑色
2.default：状态栏背景是白色
3.black-translucent：状态栏背景是半透明
-->
<meta name="apple-mobil-web-app-statue-bar-style" content="black"/>
<!--忽略页面中的数字识别为电话号码，忽略email识别-->
<meta name="format-detection" content="telephone=no,email=no"/>
<!--优先使用最新版本IE和Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

二、 HTML5标签的使用

  开发移动端页面时，建议前端工程师使用HTML5，HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，减少开发者的工作量。

三、块级化a标签

  由产品意识形态决定，在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

四、使用弹性盒布局

  有助于前端工程师做到盒子模型灵活控制。

五、常见问题

1.webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder{
   color:#AAAAAA;}
input:focus::-webkit-input-placeholder{
   color:#EEEEEE;}

2.iso和android下触摸元素时出现半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0);