前端碎片知识总结（移动开发篇）

关于移动Web开发的一些坑和技巧总结：

「H5」这个词汇虽然是不专业的，但在国内环境里最能让非技术人员理解的叫法
通常移动端页面被俗称「H5」页面，，我们应该关心的是沟通效率和成本
因此下文所「H5」即移动终端设备上的WEB页面。

1. 关于PPI

　PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。PPI中的pixel指的应该是物理像素。
显示器上的像素我们就称之为物理像素(physical pixel)或者设备像素(device pixel)。
CSS像素从来都只是一个相对值。在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。

2. webkit内核中的一些私有的meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<!--强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iPhone设备中的safari私有meta标签，表示允许全屏模式浏览-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--iPhone的私有标签，它指定的iPhone中safari顶端的状态条的样式-->
<meta content="telephone=no" name="format-detection">
<!--忽略将页面中的数字识别为电话号码-->

3. CSS基础交互

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为

代码如下：

a, img {
    -webkit-touch-callout: none;  /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;  /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
img {
    vertical-align：bottom;  /* 解决移动端图片的父元素高度多出3.5px */
}

4. 去除 iOS Webview alert 弹窗网址的解决办法

window.alert = function(a) {
    var b = document.createElement("IFRAME");
    b.style.display = "none";
    b.setAttribute("src", "data:text/plain,");
    document.documentElement.appendChild(b);
    window.frames[0].window.alert(a);
    b.parentNode.removeChild(b);
};

来源：去除 iOS Webview alert 弹窗网址的解决办法

5.终端设备参数

移动端的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。不管你是前端攻城狮还是UI设计狮，看看下图你就会知道，这是多么痛苦的一件事情：

再来看看H5页面需要适配的终端设备品牌：

看到这些数据是不是感觉回到了IE6时代？想想当年适配IE6都弱爆了。
谷歌设计列出了市面上比较流行的设备参数，可以点击这里查阅，国内网络不能正常访问！

Markdown语法说明：点击查看入门
专注文章内容的创作胜过博客样式的美观，祝各位玩的开心:) !