以下所有内容均是我自己理解的，可能有误，懂得大佬希望指点一下我。。

首先，写一个简单的页面。里面只有1个200*200的div

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

            div {

                background-color: red;

                width: 200px;

                height: 200px;

            }

        </style>

    </head>

    <body>

        <div>

            123

        </div>

    </body>

</html>

　 把他们在电脑上和在iphone8上看，会发现，同样是200px的css像素单位，竟然不一样大？？？原来css像素单位其实是个抽象的概念，真的显示靠的是终端设备的物理像素。

这里先引入一个概念叫dpr，dpr=物理像素／设备无关像素，设备无关像素对于web而言就是css像素。

如果说本来屏幕够大的电脑，1px的css像素就对应了1px的物理像素。但是对于移动端设备就不行啊，屏幕太小了，你稍微设一个div大点，一般的手机估计就要启动移动条了。

那怎么办？为了让我们的移动端手机把这么大的电面页面放进去，这里就要用到上面说的dpr了。比如说dpr为2的iphone 6，1px的css 就等于 2px的物理像素。

记住，物理像素可以被认为是物理元件，就当它是很小很小的显示屏。手机上的1px物理像素肯定做的比电脑上要小点。我们在为页面写上css以后，把他们放在电脑上和手机上看，差别就

出来了。电脑上一比一的显示，手机上，如果是dpr等于2的话，1px的css长度，就等于0.5倍的css长度。所以看上去就小了！！！

那问题就来了！！！这么小，我看不清楚啊！！！ok，那既然1px的css长度看上去好像缩小了一半，那想变大点的话，你就设置2px的css，这样看上去就像电脑上的1px一样了。字体也是一样的道理。

另外还有一种解决办法，用meta的viewport，我们经常会看到head里加这么一段代码：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

这样写完之后，大小竟然和电脑上显示的完全一致？？？？什么鬼呢？？？我感觉了一下，就像我们按住ctr和+的组合键，放大着看了一样。

其实这个scale = 1/dpr。 物理像素是物理元件，是不可能变化了，那只能是css像素缩放了，反正他只是个抽象的概念嘛！！！

好！其实内容已经介绍完了，我们拿ip6为例，本来dpr=2的，scale = 1/dpr = 1/2 = 0.5的，但是你强行写成了1，这样就相当于你把原本200px的css像素，放大成了400px的css像素。这样不就电脑和

手机上显示一样了吗！！！

如果你在别的地方，看乱七八糟一大堆介绍viewport的概念的，什么理想的viewport，布局的viewport，视觉的viewport这种觉得很烦的话，你就记住物理像素是物理元件，改变不了的！！想缩放，就只能

去改变css大小！！！，我们在meta里设置viewport就是缩放css大小！！！

viewport大白话的更多相关文章

  1. CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...

  2. 移动WEB开发之viewport

    问题: 在codepen上写了一个响应式页面,调试的时候没有问题.结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的.         查阅资料之后知道响应式布局应该有这样一句话:<m ...

  3. viewport理解

    viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dp ...

  4. 移动WEB viewport 相关知识

    了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题 ...

  5. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  6. 移动端开发viewport深入理解（转）

    一.viewport的概念   移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...

  7. 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  8. HTML5开发手机应用--viewport的作用

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  9. 从viewport发现小米手机参数不一致

    想要在移动web领域有所深造的小伙伴,第一关要过的就是逻辑像素与设备像素之间的关系. 初入移动web,一定要搞懂的几个单位(DPI.PPI.DP.PX 的详细计算方法及算法来源是什么?): dip(d ...

随机推荐

  1. Http服务器实现文件上传与下载(三)

    一.引言 在前2章的内容基本上已经讲解了整个的大致流程.在设计Http服务器时,我设计为四层的结构,最底层是网络传输层,就是socket编程.接着一层是请求和响应层,叫做Request和Respons ...

  2. Django - 环境搭建、url、视图、模板、标签、过滤器

    (一).简介 简介就不多说了,网上的内容一大堆.总结来说,django是走大而全的路线,写项目超级快,几乎什么都为你考虑到了,你就乖乖照着它的格式来写就行了. 这里来一些基本认知: web应用框架(w ...

  3. 我的JavaScript笔记--面向对象

        单例模式 ??(基于对象,不能批量生产)  var person = {             name: "ywb",             sayHi: funct ...

  4. 我的JavaScript笔记--数据类型，预编译，闭包

     在我们js中存储数据的空间可以分为两种,堆内存和栈内存 堆内存:我们定义的那些引用数据类型的数据都会在堆内存中开辟空间. 栈内存:我们运行的js代码还有我们定义的基本数据类型,都直接在栈内存中存储 ...

  5. 关于TNS_ADMIN环境变量

    转自:https://blog.csdn.net/pan_tian/article/details/7699599 很多oracle产品都有自己的TNS文件,如果你的系统里装了多个Oracle的产品的 ...

  6. linux的%用法

    转自:http://blog.csdn.net/wu020708/article/details/52387473 linux (%和%%)(#和##)贪婪匹配规则 先看一个案例,提取文件名: fil ...

  7. 170228、Linux操作系统安装ELK stack日志管理系统--（1）Logstash和Filebeat的安装与使用

    安装测试环境:Ubuntu 16.04.2 LTS 前言 (1)ELK是Elasticsearch,Logstash,Kibana 开源软件的集合,对外是作为一个日志管理系统的开源方案.它可以从任何来 ...

  8. 巨蟒python全栈开发flask3

    首先,我们新建一个项目: 这个时候,我们调用ab函数,可以在所有的模板中使用. 上边是一个特殊装饰器, 1.flask特殊装饰器 下面说几个特殊的装饰器 再请求之前的装饰器 运行: 这个时候,服务端打 ...

  9. mysql crete view

    CREATE VIEW user_algo_view ASselect `u`.`userId` AS `UserId`,`u`.`userCode` AS `UserCode`,group_conc ...

  10. SpringMVC 之 RESTful 风格的增删改查

    1. 视图和视图解析器 视图解析器 请求处理方法执行完成后,最终返回一个ModelAndView对象,对于返回String,View 或 ModelMap 等类型的处理方法, SpringMVC 也会 ...