像素与视口（学习笔记）

4个像素
    物理
    css
    独立
    位图
3个视口
    布局
    视觉
    理想
2个操作
    放大
    缩小
1个比例
    像素比

布局视口和视觉视口

layout viewport:
        手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
        布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
        可以通过document.documentElement.clientWidth来获取 
            在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横向的布局都是
        按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。
visual viewport:
        视觉视口语设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
        visual viewport的宽度可以通过window.innerWidth 来获取，
                但在Android 2, Oprea mini 和 UC 8中无法正确获取。

理想视口

我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是
用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！
只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta标签，
理想视口才会生效。

这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致

css像素能不能代表一个设备的大小？如果能代表，这个值确不确定?

        能               不确定
        
        屏幕大小之间的比较应该使用绝对单位:屏幕尺寸

物理像素与css像素比例的维护是谁在维护？ 维护规则是什么？

        视觉视口(1.决定用户能看到什么；2.包住整个布局视口)
            物理像素:屏幕的分辨率
            css像素: 布局视口尺寸
        
        加name为viewport的meta标签
            像素比
        没有加name为viewport的meta标签
            布局视口尺寸 / 屏幕的分辨率

四个像素之间的关系

        设备独立像素
        物理/设备像素
        css像素
        位图像素
        
        物理像素和设备独立像素:
            像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数  =2;
        
        物理像素和位图像素:
            1:1的时候才能完美清晰的展示
        
        物理像素和css像素
            普通屏:1比1
            高清屏: 
                加name为viewport的meta标签
                    像素比
                没有加name为viewport的meta标签
                    布局视口尺寸 / 屏幕的分辨率
        
        css像素和设备独立像素
            没有加name为viewport的meta标签:没有关系
            加name为viewport的meta标签:可以认为css像素就是设备独立像素
            
        注意@2x 和 @3x图的使用

像素比 到底是什么

像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数  =2;

理想视口什么时候出现？ 像素比什么时候有用？

加name为viewport的meta标签           

理想视口与设备之间的关系

理想视口的尺寸：设备独立像素所代表的值

不同浏览器在同一设备上理想视口的尺寸可能会不一样
一款浏览器在不同设备上理想视口的尺寸可能会不一样

思考视口的主线

    本质上三个视口的物理尺寸就是屏幕尺寸
        在不一样的情况下，各个视口所包含的css像素的个数是不一样的
        
        布局视口包含的css像素的个数
            980 1024 （浏览器不一样）
        
        视觉视口包含的css像素的个数
            默认情况（css像素和物理像素1:1）---> 屏幕的分辨率
            移动端浏览器初始化的时候（视觉视口必须要包住布局视口）  ---> 布局视口包含的css像素的个数就是视觉视口所包含的
            用户缩放（只影响视觉视口）
                放大---> 视觉视口包含的css像素的个数变少
                缩小---> 视觉视口包含的css像素的个数变多
        
        理想视口包含的css像素的个数
            设备独立像素所代表的值

缩放

pc端的缩放:会改变元素的布局（布局视口）

移动端（缩放只改变视觉视口内css像素的个数）
        放大
            使css像素变大，一个css像素所包含的物理像素的个数变多，元素变的更大
            视觉视口内，css像素的个数变少
        
        缩小
            使css像素变小，一个css像素所包含的物理像素的个数变少，元素变的更小
            视觉视口内，css像素的个数变多

怎么获取三个视口的值

布局视口：document.documentElement.clientWidth(基本没有兼容性问题)
视觉视口：window.innerWidth（有一点兼容性问题）
理想视口：screen.width（兼容性问题极大）

完美视口以及meta标签

过大的元素--->完美视口
    

哪些操作会影响布局视口

width=320
initial-scale=2.0

等比问题

没有加name为viewport的meta标签
    一个相同css像素大小的区域在不同的设备是等比的,
            在不同的设备上占据的实际物理大小（英寸）不一样

加name为viewport的meta标签
    一个相同css像素大小的区域在不同的设备是不等比的,
        在不同的设备上占据的实际物理大小（英寸）是一样的
        
等比是不是一个必须的需要？
    百分百还原设计图 ---> 在不同设备上要等比（文字要完美清晰的展示）
                                            ----> 必须加meta标签（不等比）
                                                ---> 适配！！！！（加上meta标签后也得等比）