7. HTML5项目实战《谷粒音乐》

1. 移动端简介

1.1 分类

• web app：页面从数据库动态加载到本地
• native app ：页面通过安装包直接安装到本地
  • 安卓app：java编写
  • ios app：Objective-C

1.2 移动价值链

• 网络运营商
  • 中国移动 非补贴模式：运营商不参加手机的销售
  • 中国联通 补贴模式（一般在发达国家，高端智能机）
  • 中国电信 佣金系统
• 设备供应商
  • 华为
  • 小米
  • vivo
  • oppo
  • 三星
  • 苹果
  • ……
• 软件制造商（操作系统）
• 服务提供商

1.3 移动端浏览器分类

• 移动端大概有30多种浏览器，其中20多种处于边缘化状态

1.3.1 内置浏览器（更新慢 移植在操作系统中）

• 安卓==>安卓webkit
  • 三星 三星webkit -->三星chrome
  • 中兴 中兴webkit -->中兴chrome
  • 华为 华为webkit -->华为chrome
  • 小米 小米webkit -->小米chrome
  • 索尼 索尼webkit -->索尼chrome
• ios ==>safari

1.3.2 可下载浏览器（更新快 独立于操作系统）

• QQ浏览器 UC浏览器
• 只有安卓才有可下载浏览器，在ios上不允许安卓其他的渲染引擎

1.3.3 代理浏览器

• 渲染引擎存在于服务端（代理服务器）,导致js性能极其低下 访问静态页面可以得到保障
• 与代理浏览器相对应的叫完备浏览器
• opera-mini uc-mini

1.3.4 混合浏览器

• 省流量模式：代理浏览器
• 不省流量模式：完备浏览器

2. 移动端基础概念

2.1 像素

• 屏幕尺寸：屏幕对角线的长度，单位是英寸，1英寸=2.54厘米
  • 常见的屏幕尺寸：2.4、2.8、3.5、3.7、 4.3、 5.0、 5.5、 6.0
• 屏幕分辨率：物理像素点的个数
• 屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是ppi (pixels per inch)
• 物理像素：设备像素，出厂后即固定
• CSS像素：抽象单位，使用在浏览器上
• 位图像素：图像的最小单位，1个位图像素对应一个物理像素，图片才能得到完美清晰的展示
• 设备独立像素：是CSS像素和物理像素做转换的一个重要媒介 ，是一个抽象的层，是设备提供出来的接口
• 像素比：一个方向上占满屏幕所需的 物理像素个数/设备独立像素个数

2.2 视口

• 布局视口：
• 视觉视口：
• 理想视口：

var layout=documnet.documentElement.clientWidth; //layout的宽度，没有兼容性问题
var visual=window.innerWidth;//visual的宽度，接近全部支持
var dream=screen.width;//一半代表理想视口的宽度，一半代表设备的分辨率，有很大的兼容性问题

2.3 缩放

• 放大：
  • 一个css像素的面积变大，视觉视口内css像素的个数变少，视觉视口的尺寸变小
• 缩小：
  • 一个css像素的面积变小，视觉视口内css像素的个数变多，视觉视口的尺寸变大

2.3.1 用户缩放

• PC端：用户缩放影响视口的尺寸
• 移动端：用户缩放只影响视觉视口的尺寸

2.3.2 系统缩放

• 系统缩放参照于理想视口进行缩放，改变的是布局视口和视觉视口

<meta name="viewport" content="initial-scale=1.0">

2.3.3 完美视口

• 当水平方向元素宽度大于布局视口时，理想视口状态下，视觉视口会变大来包住过大的元素
• 完美视口则会出现水平方向的滚动条，视觉视口大小不会改变
• 可以解决旋转问题和元素太大问题

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

2.3.4 冲突

• width：控制布局视口
• initial-scale：控制布局视口和视觉视口
• 发生冲突时，谁大听谁的

2.3.5 viewport的meta标签

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