H5端的新特性及兼容性问题总结

新增标签

• header　　代表头部标签
• footer　　代表脚部标签
• nav　　代表导航标签
• Hgroup　　标题组合标签
• section　　区域标签
• article　　文章标签（也可以代表单独的一部分）
• aside　　侧边栏标签
• progress　　进度条
• figure　　对元素的组合 （图片加文字的组合）
• time　　时间标签
• datalist　　下拉列表 （与select标签功能一样）
• detail　　细节　　是否允许用户可见/不可见的内容
• address　　地址
• mark　　突出的部分　具有高亮效果

标签更加语义化，，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析

input新增类型

• color 选择颜色
• date 选择日期
• datetime 选择一个日期（UTC 时间）
• datetime-local 选择一个日期和时间 (无时区)
• email 用于检测输入的是否为email格式的地址
• month 选择月份
• number 用于应该包含数值的输入域，可以设定对输入值的限定
• range 用于定义一个滑动条，表示范围
• search 用于搜索，比如站点搜索或 Google 搜索
• tel 输入电话号码
• time 选择一个时间
• url 输入网址
• week 选择周和年

新增本地存储方式

sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开存在，包括页面重新加载
localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
cookies（可定时存储） ：集合了上面俩个的功能，存储时间可以根据自己的需求去定义可永久可暂时

兼容问题

1. ios input button背景色不起作用的
解决办法：

input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 
background改成background-color

2. H5点击事件时会有闪频效果
解决办法：给html 或者body加上·如下代码

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

3. ios元素盒子下边框不显示

ios个别机型，元素设置的下边框被遮挡或未显示。

解决方法：

给盒子父元素添加高度撑起来。

4. 移动端如何定义字体font-family

@ 宋体      SimSun
@ 黑体      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312  

5. 取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

6. 屏幕旋转的事件和样式

//JS处理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //这里是横屏下需要执行的事件
    }else{
        //这里是竖屏下需要执行的事件
    }
}

orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)    

//CSS处理
//竖屏时样式
@media all and (orientation:portrait){   }
//横屏时样式
@media all and (orientation:landscape){   }

7. audio元素和video元素在ios和andriod中无法自动播放

//音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

//音频，写法二
<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>

//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
    music.play();
})

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间

8. 旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}

9. 圆角bug
某些Android手机圆角失效

background-clip: padding-box;

10. 顶部状态栏背景色

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

11. html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
如下：

<a href="tel:10010">10010</a>