记一次移动端H5开发所遇到的问题与细节,以及ios兼容

第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video,

一.移动端禁止缩放 兼容

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

主要属性是user-scalable=no"，

• width：视口的宽度，width=device-width：宽度是设备的宽度
• initial-scale：初始化缩放，- initial-scale=1.0：不缩放
• user-scalable：是否允许用户自行缩放，取值0或1，yes或no
• minimum-scale：最小缩放
• maximum-scale：最大缩放
• 一般设置了不允许缩放，就没必要设置最大最小缩放了。

在开发移动端时，meta 还有很多属性可以设置，比如

1.设置当前html文件的字符编码

<meta charset="UTF-8">

2.设置浏览器的兼容模式（让IE使用最新的浏览器渲染）

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

3.是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

<meta http-equiv="Pragma" content="no-cache"/>

4.禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。

这个标签的默认值是telephone=yes。

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

5.删除默认的苹果工具栏和菜单栏

当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

<meta content="yes" name="apple-mobile-web-app-capable"/>

6.控制状态栏显示样式

content设置状态栏颜色,iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

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

7.条件注释

!--[if lt IE 9]> 
<script src="lib/html5shiv/html5shiv.min.js"></script> 
<script src="lib/respond/respond.min.js"></script> 
<![endif]--> 


- html5shiv让浏览器可以识别html5的新标签； 
- respond让低版本浏览器可以使用CSS3的媒体查询。

8.iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

<meta content="yes" name="apple-mobile-web-app-capable">

还有其他的这里就不一一介绍了

<!-- 视图窗口，移动端特属的标签。 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略页面中的数字识别为电话号码,email识别 -->
    <meta name="format-detection" content="telephone=no, email=no" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name=&