为什么同样大小的像素在移动端和pc端看起来不一样

       最近几天在搭建博客,在做前端页面的时候因为要做成兼容pc端和移动端的响应式,对于我这样的菜逼来说没有接触过移动端,就在网上搜索了大量的资料,终于,终于,终于入门了。。。。

        先放上各种资料的连接,请按照我整理的顺序看这些资料,非常受益。因为我知道很多前端开发人员,甚至是老手,他们在做移动端的时候不管三七二十一都会加上一个meta,作为新世纪的前端,我们要知其然知其所以然

1、移动端调试

2、meta标签

3、使用Flexible实现手淘H5页面的终端适配

4、[]


        在看下面的解释的时候最好先看一下我上面罗列的第二项,好了,下面我将解释:为什么同样大小的像素(比如14px)在移动端(看起来小)和pc端看起来不一样?

像素的相关词

ppi (Pixels Per Inch)

也叫像素密度,所表示的是每英寸所拥有的像素数量。密度越高,拟真越强。移动设备通常会给出对角线的长度(单位英寸),和长*宽的分辨率,所以根据公式可以算出ppi:

同理,如果只给出了设备长(单位英寸)和长度分辨率(单位像素),也同样可以算出来。

PPI=√(X²+Y²)/ Z (X:长度像素数;Y:宽度像素数;Z:屏幕尺寸)

dpi (Dots Per Inch)

       这是和ppi容易混淆到一起的概念。指打印设备每英寸印刷出来的点有多少个,同一张图片打印出来和在电脑上看到的清晰度就不一定相同。因为不影响我们理解,有一些博客又喜欢混用,作为只跟电子屏打交道的前端开发,认为各大博客上的dpi=ppi就好。

dpr (device-pixel-ratio: Number of device pixels per CSS Pixel)

        dpr可以用window.devicePixelRatio得到,是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是:window.devicePixelRatio = 物理像素 / css像素

大家通常指的dpr是个固定值:dpr的值表示在理想布局宽度(ideal viewport)里,使用多少个物理像素来渲染一个设备独立像素

在ios中,dpr通常是1,2,3;但是在android中,ideal viewport会根据浏览器自己的喜好变化,甚至会是小数。现在andorid注重高分辨率,很多都达到3了。


       为什么同样大小的字体(比如14px)或者同一个app的icon在不同的移动设备下人眼看起来的大小不一样?

       答:其实这个问题等价于一个css像素在两个设备中分别等价于多少英寸。如果网页是在ideal viewport下,可以推理出一个公式:每个物理像素等于1/PPI()英寸),在ideal viewport下,DPR表示1个css像素由几个物理像素组成。因此,得到公式:

(1/PPI)* DPR = DPR/PPI

         举个例子:iphone6-PPI为326,DPR为2,DPR/PPI约等于0.0061;iphone6S-PPI为401,DPR为3,DPR/PPI约等于0.0075;所以iphone6s上的app和字比iphone6大哦。

         通常,设备显示屏越大,一个css像素代表的物理尺寸需要大一点。因为人眼会离大屏幕的比较远,离小屏幕的比较近。虽然物理尺寸不一样,但是人眼感觉起来是差不多大的。

14寸笔记本的ppi大约是112,因此分母小,所以pc端上看起来很大

推荐阅读更多精彩内容

  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 9,650评论 7 74
  • 目录 移动端开发的基本观点 像素基础知识 viewport原理解析 弹性布局 响应式设计 1rem的运用 移动端的...
    犯迷糊的小羊阅读 1,543评论 4 17
  • 1.移动端迷之视口 为什么我称他为“迷之视口”,因为其实我听过很多人的分享,来讲解移动端视口的问题,但我好像都...
    buershero阅读 297评论 0 2
  • 一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影...
    nimw阅读 1,577评论 0 4
  • 初恋这件小事,有那么点点羞涩,有那么点点心酸,还有那么点点微甜。 时间如白驹过隙,十年的时间就那么一眨眼,如烟如雾...
    追风的二小姐阅读 36评论 0 1