之前在电视的webview上投放广告页面时,遇到了个问题,就是视窗大小和文档大小不一致。最后发现原来有CSS Pixel这个概念,搜集了一些资料,希望能把这个问题捋捋清楚。

首先提出一个大家常常会忽略的问题:

如今主流手机屏幕的像素点数已经远远超过了桌面显示器的像素数量,5.5英寸1920x1080P的手机与一个21英寸1920x1080P的显示器相比,同等面积下,手机的像素点更密集,可想而知,在手机屏幕上一个像素点是非常小的。

那么在CSS中设置font-size:12px,如果“手机屏幕物理像素:CSS像素”=“1:1”,那么手机上展示出来的字体你可能需要放大镜才能看清,但为什么如今的手机屏幕依然能清晰的显示?

答案就是:CSS中的px与屏幕上的物理像素px不是等同的。

逻辑分辨率与物理分辨率

由于以上物理像素尺寸差异导致的问题,我们不可能把电子文件中的像素与物理像素做1:1的适配。必须在小的设备上适当放大,也就是说用多个物理像素来显示一个电子像素,从而保证阅读质量。
所以devicePixelRatio应运而生:逻辑分辨率 = 物理分辨率 / devicePixelRatio

普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3

因为大部分桌面显示器的devicePixelRatio为1,所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。

举个栗子来说,一张100x100的图片,通过CSS设置它width:100px;height:100px。在电脑上打开,没有什么问题,但是在手机上打开,屏幕按照逻辑分辨率来渲染,假设手机的devicePixelRatio=3,那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片,你的图片可能因此变得模糊,因为细节不够。所以一般明智的做法是把图片换成300x300的,CSS宽高不变,这样在手机上展示时,CSS宽高换算成物理像素是300x300,你的图片也是300x300,就不会变糊了。

移动端开发方案

打开一个页面,移动端浏览器会自动寻找<meta name='viewport'>,如果指定了视窗口的width,就会把页面放到指定widthviewport里面。如果没有指定,则默认值有的是980,具体根据浏览器来定的。(我遇到的就是这个问题,通过添加下面的代码解决)

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

总结

当时因为是在电视上投放页面,并未当成手机移动端来考虑,出现这个问题一直认为是对方的问题,结果发现是页面缺少viewport meta标签,反思良多。
自己的对于移动端Web开发了解的还不是很多,这篇文章一是记录问题,二是能简单梳理下CSS像素的概念。如果今后有机会接触更多的移动开发的话,会另起炉灶写一篇更为详细的关于这方面的文章,既是学习,也是记录。

本文部分文字借鉴自知乎回答、网络BLOG:

CSS像素与绝对像素的更多相关文章

  1. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...

  2. CSS中的px与物理像素、逻辑像素、1px边框问题

    一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出& ...

  3. css实现0.5像素的边框

    公司的设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的.iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了边框为1px的box的时候 ...

  4. 第119天:移动端:CSS像素、屏幕像素和视口的关系

    移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...

  5. CSS像素、设备独立像素、设备像素之间关系

    CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程 ...

  6. 什么是物理像素、虚拟像素、逻辑像素、设备像素,什么又是 PPI, DPI, DPR 和 DIP

    什么是物理像素.虚拟像素.逻辑像素.设备像素,什么又是 PPI, DPI, DPR 和 DIP?有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样,又有哪些方法去改变和统一呢?网络上 ...

  7. 分辨率,PPi,DPI,DPR,物理像素,逻辑像素

    屏幕尺寸:指的是屏幕对角线的长度 分辨率:是指宽度上和高度上最多能显示的物理像素点个数 点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小 PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米 ...

  8. 用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

    这篇文章能让你了解到什么是分辨率.dpr.dip.ppi (dpi相当于ppi,dpi用点表示物理像素密度,ppi是逻辑像素密度) 首先从最简单的ppi开始: 一部手机,有大有小,怎么知道手机的大小用 ...

  9. 移动端1px像素解决方式,从1px像素问题剖析像素及viewport

    在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较 ...

随机推荐

  1. GoJS事件

    1.阻止键盘事件 myDiagram.commandHandler.doKeyDown = function () { var e = myDiagram.lastInput; // Meta(Com ...

  2. Java 添加、隐藏/显示、删除PDF图层

    本文介绍操作PDF图层的方法.可分为添加图层(包括添加线条.形状.字符串.图片等图层).隐藏或显示图层.删除图层等.具体可参考如下Java代码示例. 工具:Free Spire.PDF for Jav ...

  3. 5. 配置项:rule_files

    prometheus配置文件内容: global: # 默认情况下抓取目标的频率. [ scrape_interval: <duration> | default = 1m ] # 抓取超 ...

  4. Task Scheduler API Error 80041318

    https://stackoverflow.com/questions/42307917/task-scheduler-api-error-80041318/42462235#42462235 Hi ...

  5. Spring5参考指南: Resources

    文章目录 内置Resource实现 ResourceLoader ResourceLoaderAware 资源作为依赖 构造ClassPathXmlApplicationContext-快捷方式 资源 ...

  6. CSS样式3

    1.positon:fixed 可以实现网页浏览器上的返回顶部的功能. positon:fixed 表示将当前div块固定在页面的某一个位置(默认为左上角). <!DOCTYPE html> ...

  7. Omnicore RPC API中文文档

    2019独角兽企业重金招聘Python工程师标准>>> OmniCore是比特币核心的一个分支,它在比特币协议之上实现了一个新的Omni协议层,用于代币发行.众售等应用,USDT就是 ...

  8. 可运行的Java RMI示例和踩坑总结

    简述 资料参考: https://docs.oracle.com/javase/tutorial/rmi/overview.html https://blog.csdn.net/bigtree_372 ...

  9. Linux环境下,MongoDB 3.6.10 的安装步骤,以及设置用户和密码,配置随处执行mongo命令启动客户端,以及所遇到的问题

    https://blog.csdn.net/qinaye/article/details/87920651 二.设置MongoDB用户和密码2.1 利用./mongo命令连接mongoDB客户端../ ...

  10. python(re 模块)

    1.re.match() 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回none. group() 以str形式返回对象中match的元素 start() 返回 ...