开发者学堂课程【移动 Web 前端开发：准备-viewport-非主流分析】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8399
准备-viewport-非主流分析
内容介绍
一、viewport 标准化适配要求
二、Viewport 完成标准版设置
Viewport 为了移动端开发时需要准备的，具备适配方案
创建 viewport.html
<!--
1. 当把一个百分百的页面在移动设备浏览的时候﹑网页的宽度没有和设备的宽度一致
2. 移动设备的网页是基于什么来计算宽度的
3. 原因是在移动设备当中﹑浏览器和网页之间还有一层虚拟的容器，这个容器叫viewport
4. viewport:::只在移动设备才有，默认就存在，虚拟的容器用来承载网页的，而且主流的设备当中的 viewport
一、viewport 标准化适配要求
1. 网页的宽度和浏览器一致：网页的宽度和视口宽度一样然后视口的宽度和浏览的一样（和设备的一样)设置 width 和设备一样这里有一个特殊的值 width=device-width
缩放比例和 PC 一样 initial-scale=1.0
2.保证网页内容的缩放比和PC端保持一样视口的缩放比是1.o
设置 width 和设备一样这里有一个特殊的值 width=device-width 缩放比例和 PC一样initial-scale=1.0
3.不允许用户自行缩放视口禁止缩放user-scalable=0
二、Viewport 完成标准版设置
1.怎么设置 viewport
网页的加载和解析顺序是从上到下，目的是让浏览器优先解释，运用在网页上<meta name="viewport”/>
2.具体的功能怎么设置
width
设置视口的宽度
单位默认是 px 特殊的值 device-width 代表当前设备的宽度
initial-scale 设置视口的默认的缩放比
大于0小于1缩小大于1放大
user-scalable
设置视口是否运行用户自行缩放
0代表否1代表可以no yes
打开站点：m.hao123.com,按键盘F12,把他切换到移动端设备，刷新一下,打开<head>找到 viewport
<meta name="viewport" content="width=device-
width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
打开站点：m.ctrip.com,按键盘F12,把他切换到移动端设备，刷新一下,打开<head>找到 viewport
meta name=""viewport" content="width=device-
arith,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0.user-scalable=no,minimal-ui"">
打开主流站点：info.3g.qq.com，腾讯移动端官网，查看 viewport
<meta name="viewport" content=width=device-
width,initial-scale=1.0,maximum-scale-1.0,minimum-scale=1.0,user-scalable=no,shrink-to-fit=no"">
此 viewport 有点有特殊
打开京东：m.jd.com，找到 header，找到 viewport 设置
<metaname-"viewport"contentm"width=device-width,initial-sca-1.8,maximum-scale=1.0,user-scalable=0
刚才达到的都是移动端标准适配，打开淘宝站点：m.taobao.com，viewport超出了我们的想象
<metaname="viewport"content="initial-scale=0.5,maximum-scale=8.5, minimum-scale=0.5,user-scalable=no"" >
此设备为 iphone 4
修改移动端设备为 iphone 6
网页都被缩放到0.5，只对 scale 进行缩放，一个和属性都可达到两个功能，只设置默认状态比，一个属性就可控制
为什么产生0.5缩放？
原因在于2倍的概念，切换设备为 iphone 6 plus,就变成三倍的，由此查看 scale
<metaname="viewport" content="initial-scale=0.3333333333333333,maximum-
scale=6.3333333333333333,minimum-
scale=0.3333333333333333,user-scalable=no">
新建一个 html ,名为03 viewport 非主流 .html
<! DOCTYPE html><htm1>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--
1.有些设备的缩放比是0.5网页的宽度是设备宽度的两倍
但是有些设备又是0.3333333 网页宽度是设备的三倍
问题：
在移动端的图片图标有失真问题的存在
2.解决移动设备显示图标图片失帧问题的提高页面的清晰和显示的细腻度
3.移动设备使用老一点的设备，使用眼睛可以看到颗粒，把这样的颗粒称为物理像素点，，而新的设备，把像素点做的更小了，把像素点压缩到一块屏幕中去了，iphone3的320px乘以480，到了 iphone4 是640乘以960，此时说的分辨率是物理分辨率，多少像素是属于逻辑分辨率，意味着以前的设备 一个 px 尺寸放了一个物理像素点，现在一个px可以放置两个，到现在还有跟高清的设备可以放三个 ,使用的都是高清显示屏,比如说iphone 6 plus,414px 里面集成了1240个像素点 一个 px 尺寸屏幕里面有了多个物理像素点相当于把图片放大了。
4. 淘宝非标准化设置目的是为了提高页面的清晰和显示的细腻度
一般来讲，移动端的开发还是按照标准化方式，但也会面对图片失真问题，用标准化方式来做应该去解决这个问题，在进行开发的时候会遇到就可以学习如何解决了，现在只需把非标准化设置理解透彻，和移动端肯恩会产生图片失真问题就可以了。
</ head>
<body>
</ body>
</ html>
要原来的网页缩小三分之一，没有规律的缩放倍数，这样的设置和我们移动端的图片失帧有关系
平常都是1.0与 pc 端保持一致，这里为什么是0.5要进行缩放，在这里有一个问题：移动端的页面上的图片会有失真问题的存在。
如果现在的 viewport 是0.5，但是设备的宽度是320px，意味着原始页面的大小应该是640px。
找到<html>显示 640px×960px，进行了0.5倍的缩放正好放在了设备当中。
在<head>中可以看到：只对 scale 进行了缩放，讲解属性学习过一个属性可以达到两个功能。
当更换设备会发现缩放倍数出现 2倍 3倍等无规律的缩放，是因为移动端图片失真有关系。
当设备为 iPhone4是缩放倍数为2倍，iPhone 6 plus 时是3倍，这两种设备有什么区别？
普通显示屏幕：普通显示器，旧手机 后来发展出了
高清显示屏： 视网膜屏，retina屏 retina：是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻,也叫做视网膜显示屏
比如 iPhone 3是320px×480px，到了 iPhone 4是640px×960px，这里的分辨率是物理分辨率。意味着以前一个1px 尺寸里放了一个物理像素点，现在还是一个1px尺寸，但是可以放两个物理像素点，还有更高清的设备可以放更多。
发现一个规律：当设备为 iPhone 4时网页宽度是640px，是它的两倍，当设备为 iPhone 6 plus 时宽度是它的三倍，这和当前一个 px 显示几个物理像素点有关系，当设备为 iPhone 4 时能显示两个，网页大小就变成了640px，iPhone 6 plus 时能显示3个，这时候会有三倍网页。
物理像素比：一个 px 的宽度能放几个物理像素，iphone6 plus 一个放三个，iphone4 一个放置两个
一个 px 里装几个物理像素点有一个专业名字：物理像素比（一个 px 的宽度能放几个物理像素）
这样放置会产生图片失帧问题：图片失帧不是网页失帧，因为网页大部分都是矢量的，无论放大缩小都不会影响它的质量。但是图片是固定的质量大小
举例：两杯水大小不一致，老的设备就当作一个杯子，1kb图片放入杯子，1kb大小为1px，老的设备是1px大小正好放入，新的设备里面有两个物理像素，相当于就有两个杯子了，每一个物理像素点仅仅只有半杯水，原来装1px大小是装满的，相当于平均分配我 kb 的，没有饱和就相当于把它放大了
如何解决此问题？
多个物理像素存在一个图片肯定比一个存放一个放大了
淘宝非标准化把整个页面放大640，整个图标也会放大，如果压缩，原始尺寸还是640，原始图片还是100，当我是高清屏是，物理像素依旧饱和，依然提高图片清晰度。
同样道理，当设备换位 iphone6 plus，此时就是3个，原来的三倍再压缩一下也是饱和，这样来提高图片清晰度和显示，解决图片失真问题。
