window.devicePixelRatio 独立像素比(经典文章+原创)
设备像素/物理像素
设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
屏幕密度
通常以每英寸有多少物理像素来计算(PPI)。
独立像素/CSS像素
CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。
一般情况下,CSS像素被称为与设备无关的像素(device-independent像素),简称为“DIPs”。在一个标准的显示密度下,一个CSS像素对应着一个设备像素。
<div style="width:320px; height:320px;background-color:blue;"></div>
就拿上面的代码来说(在头部没有加入<meta name="viewport" content="width=device-width">),在电脑端和手机端显示,结果是
出现这样的原因是因为电脑端显示设备的物理像素(液晶显示管)比较大,而手机的比较小,(生活中你可以发现电脑和手机都要存放很多液晶显示管,区别就是电脑的屏幕大,手机屏幕小)所以结果是同样要用200个物理像素结果就不一样了。
以上两张图片显示的结果是css样式的结果。
独立像素比/window.devicePixelRatio
window.devicePixelRatio=物理像素/独立像素。
通过计算你会发现刚才的两种手机的结果分别是1或者2(当然还有其它手机屏幕结果有些差别)
呵呵........
接下讨论一下,要想让手机显示上显示的结果和电脑一样大怎么办,所谓的一样大是,就是你用一把尺子量一下,电脑上长度和宽度各是200,手机上长度和宽度也各是200,也就是给人的视觉效果是一样大。
手机屏幕分为:
一:非视网膜屏幕(物理像素320,该设备的独立像素(视区宽度)也是320)
二:视网膜屏幕(物理像素640,该设备的独立像素(视区宽度)还是320,刚才手机显示的结果用的就是用的这个手机)
<meta name="viewport" content="width=device-width">
这个代码的作用就是让视图区域撑满手机物理屏幕。
html文件头部加上这个代码后,手机显示的大小和电脑显示的大小尺寸大小就一样了。
但是手机上显示的图片就模糊了,这是因为你要显示同样的物理大小,视网膜屏幕就要用双倍的物理像素来显示(一个一像素的图片,如果用浏览器4个像素(即放大了一倍)来看会变模糊和失真,所以在给手机做图片的时候,要放大一倍,就是在手机上显示的图片是100乘以100,那ps做图片要做成200乘以200这样才会清晰)。
哈哈.....
欢迎指正。
看到网上很多的文章看的我好晕,还说如果觉得文章就给他打赏,我他妈的看的头昏眼花还没有叫他赔钱呢。
大家如果觉得我的文章写到你的痛点了,或者有用请打赏。微信:youronglang 或者买点我自家代理的酒 关注微博:匠心酒
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12941821.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法