摘要：独立像素像素像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量确定页面上的内容。一般情况下，像素被称为与设备无关的像素像素，简称为。在一个标准的显示密度下，一个像素对应着一个设备像素。独立像素比物理像素独立像素。
设备像素/物理像素
设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
屏幕密度
通常以每英寸有多少物理像素来计算（PPI）。
独立像素/CSS像素
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。在一个标准的显示密度下，一个CSS像素对应着一个设备像素。
就拿上面的代码来说（在头部没有加入），在电脑端和手机端显示，结果是
出现这样的原因是因为电脑端显示设备的物理像素（液晶显示管）比较大，而手机的比较小，（生活中你可以发现电脑和手机都要存放很多液晶显示管，区别就是电脑的屏幕大，手机屏幕小）所以结果是同样要用200个物理像素结果就不一样了。
以上两张图片显示的结果是css样式的结果。
独立像素比/window.devicePixelRatio
window.devicePixelRatio=物理像素/独立像素。
通过计算你会发现刚才的两种手机的结果分别是1或者2（当然还有其它手机屏幕结果有些差别）
呵呵........
接下讨论一下，要想让手机显示上显示的结果和电脑一样大怎么办，所谓的一样大是，就是你用一把尺子量一下，电脑上长度和宽度各是200，手机上长度和宽度也各是200，也就是给人的视觉效果是一样大。
手机屏幕分为：
一：非视网膜屏幕（物理像素320，该设备的独立像素（视区宽度）也是320）
二：视网膜屏幕（物理像素640，该设备的独立像素（视区宽度）还是320，刚才手机显示的结果用的就是用的这个手机）
这个代码的作用就是让视图区域撑满手机物理屏幕。
html文件头部加上这个代码后，手机显示的大小和电脑显示的大小尺寸大小就一样了。
但是手机上显示的图片就模糊了，这是因为你要显示同样的物理大小，视网膜屏幕就要用双倍的物理像素来显示（一个一像素的图片，如果用浏览器4个像素（即放大了一倍）来看会变模糊和失真，所以在给手机做图片的时候，要放大一倍，就是在手机上显示的图片是100乘以100，那ps做图片要做成200乘以200这样才会清晰）。
哈哈.....
欢迎指正。
看到网上很多的文章看的我好晕，还说如果觉得文章就给他打赏，我他妈的看的头昏眼花还没有叫他赔钱呢。
大家如果觉得我的文章写到你的痛点了，或者有用请打赏。微信:youronglang 或者买点我自家代理的酒 关注微博：匠心酒
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115316.html
摘要：高清屏概念解析和前端开发的关系高清屏概念解析高清屏概念的兴起主要是从乔帮主发布设备开始兴起。还好我们有一个叫设备像素比的东西来检测当前屏幕是不是属于高清屏幕。 前言 做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。 也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间，把最近看到的知识总结...
摘要：设备像素设备分辨率设备像素也叫物理像素。从图中可以验证，横纵方向的设备像素数量恰好是设备独立像素的倍。像素与设备独立像素的关系缩放比例就是像素边长设备独立像素边长。因为的宽度没有改变，无论以什么单位衡量设备像素设备独立像素还是像素。 这篇文章是我在我的旧博客上发过的文章，最近又碰到这个问题，整理修改了一下发到这里。 像素单位 像素单位有设备像素、逻辑像素和CSS像素3种。 设备像素（d...
摘要：布局，缩放这也是淘宝使用的方案，根据屏幕宽度设定值，需要适配的元素都使用为单位，不需要适配的元素还是使用为单位。 讨论适配方案之前，先了解几个移动端的概念。 基础概念 设备像素(device pixels)：又称为物理像素，是显示屏的最小物理单位。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 设备独立像素(device independent pixels):基于计算机...
阅读 1597·2021-11-04 16:11
阅读 3308·2021-09-09 11:33
阅读 1558·2019-08-30 15:54
阅读 619·2019-08-30 15:44
阅读 3171·2019-08-30 15:43
阅读 2553·2019-08-30 13:06
阅读 1697·2019-08-29 17:00
阅读 894·2019-08-29 15:33
