移动web基础认识

长度单位

相对长度： px、em、pt（点）
绝对长度：in(英寸)、cm（厘米）

PPI值表示屏幕每英寸的像素数量，越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之越粗糙。
PPI > 320 就是视网膜屏幕即高清屏幕

DP单位：能够在不同的ppi设备上看去大小差不多，是独立像素，在IOS设备上交pt，在Android设备上叫dip/dp

物理像素：指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，但其值大小决定了图片的质量

// 获取屏幕的物理像素尺寸
window.screen.width
window.screen.height 

css像素指的是通过css进行网页布局时用到的单位，其默认值（pc端）适合物理像素保持一致的（1个单位的css像素 = 1个单位的物理像素）

视口（viewpo）是用来约束网站中最顶级块元素的，它决定了该标签的大小，用来显示内容。
pc端，视口大小和浏览器一致

// 获取视口的大小
document.documentElement.clientWidth;
document.documentElement.clientHeight;

在移动设备上viewport不再受限于浏览器的窗口，而是允许自由设置大小。

区别iPhone和Android中的viewport，将移动设备的viewport分为layout viewport和ideal viewport

layout viewport （布局视口）是指可以进行网页布局区域的大小，同样是以css像素做为计量单位

// 获取layout viewport  相当于上面默认的视口大小

document.documentElement.clientWidth;
document.documentElement.clientHeight;

ideal viewport（理想视口）设备屏幕区域（以设备独立像素pt、dp做单位）以css像素作为计量单位，其大小是不能被改变。

// 获取ideal viewport 
// 新设备
window.screen.width;
window.screen.height;

// 老设备
window.screen.width / window.devicePixclRatio;

移动页面最理想的状态是，避免滚动条且不被默认缩放处理。
解决办法：

<meta name="viewport" content= ""> 
进行控制，并改变浏览器默认的layout viewport的宽度。

viewport是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其他移动设备厂商采纳。用法：

通过设置属性content = “” 实现，中间以逗号隔开

1. 设置 width设置layout viewport宽度，其取值可为数值或者device-width

2. 设置，网页可以没有被浏览器设置缩放，相当于设置 width = device-width ,故得 initial-scale = ideal viewport / layout viewport

3. 因为第二点，为了达到兼容，开发中的写法是：
   其他属性：

4. maximum-scale 允许用户的最大缩放，例如 maximum-scale = 2

5. minimum-scale 允许用户设置默认情况下的最小缩放，为了一个数字，可以带小数

6. user-scalable 是否允许用户进行缩放，值为“no”| “yes”

移动端写法

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

避免滚动条：不要设置具体的宽度，宽度设置%单位

将浏览器上一个大的页面放到移动端的办法：

1. 专门制作一个移动端的页面。
2. 做一个响应式

浏览器

移动端开发主要针对IOS和Android两个操作系统平台的，还有一个windows phone
移动端浏览器可分为：系统自带浏览器、应用内置浏览器、第三方浏览器

1. 系统自带浏览器：指跟随移动设备操作系统一起安装的浏览器
2. 应用内置浏览器：QQ、微信、微薄等这些App里往往会内置一个浏览器，这就是内置浏览器（webview），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置
3. 第三方浏览器：安卓在手机的浏览器，比如Chrome等
   【在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基于webkit】