关于像素的部分基础知识

移动网页开发中提到的像素主要有三种：CSS像素、物理像素、设备无关像素

• 设备物理像素：设备上一个像素点
• 设备无关像素：可以与物理像素通过dpr转换。当dpr为1时，设备无关像素=设备物理像素。
• CSS像素：CSS中使用的抽象概念。当页面没有缩放时，CSS像素=设备无关像素。

其中，dpr（设备像素比） = 物理像素/设备无关像素（逻辑像素宽度*倍率 = 物理像素宽度）

Viewport

什么是 Viewport?

viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做”视区、视口”。

手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置Viewport

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width （为设备的宽度，单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。initial-scale=1.0：默认缩放比为1（目的：让CSS像素=设备无关像素）
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。（貌似在iOS10中的sarifi浏览器失效）

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

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

viewport 的属性具体介绍

附上一个比较的详细viewport讲解：viewport 深入理解

其他移动端开发可能会用到标签设置

禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件

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

iOS 添加到主屏幕时，WebAPP的标题

<meta name="apple-mobile-web-app-title" content="我的第一个WebAPP">

iOS 添加到主屏幕时，WebAPP的icon图标

<link rel="apple-touch-icon-precomposed" href="图片链接地址" />

iOS 添加到主屏幕时，启用WebAPP全屏模式，删除顶端地址栏和底部工具栏

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

iOS 添加到主屏幕时，WebAPP顶部状态的样式
可选值：
black：黑色；default：默认值，白色；black-translucent(半透明)：网页内容充满整个屏幕，顶部状态栏会遮挡网页头部。

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

设置浏览器使用最新的IE和chrome去编译

不是手机端专用，PC网页一般也需要设置

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