Small tips of APP H5 page

在开发日常落地页的时候，每当碰到一些很酷炫的宣传图用css实现很复杂且耗时的时候，一般采取切图然后将其放在页面中，在这个过程中发现<img/>标签中图片下方会有一行小空白，影响了与后一部分内容的衔接。

经查其原因是内联元素<img/>的默认vertical-align是baseline，可从以下几种方式解决这个问题：

1、设置此img元素的vertical-align为bottom；

2、设置此img元素的display:block；

3、设置图片的浮动属性，img {float:left;}。如果要实现图文混排，这种方法是很好的选择。

4、设置此img元素的父元素的行高为较小值，或者设置其font-size:0，不过这种方式会影响div内的其他inline元素，不推荐。

还有就是清楚浮动的常用的几种方法，网上教程五花八门很多很杂，整理了几种常见的兼容性好的方法留待以后参考：

1、添加新元素，应用clear：both；

2、使用伪类元素作用于浮动元素的父亲，这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

3、父级div定义 overflow: auto，使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好。

 

最后是关于meta标签的一些用法：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width:设置viewport的宽度为一个正整数或字符串'device=width',device-width 为设备的宽度,

height:设置viewport的高度，一般设置了宽度会自动解析出高度，可以不用设置

initial-sacle：默认缩放比例，为一个数字，可以带小数

minimum-scale：允许用户最小缩放比例，为一个数字，可以带小数

maximum-scale：允许用户最大缩放比例，为一个数字，可以带小数

user-scalable：是否允许手动缩放

针对IOS的Safari顶端状态条的演示（可选default/black/black-translucent）

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="telephone=no,email=no" />