在出现iphone4之前的相当长的时间内,网站开发人员和设计人员从来没有为像素苦恼过。那时候,设计人员打开photoshop,选择 “实际像素”后,看到的图片大小就是和最后真实的网站效果1:1的;对于开发人员也是如此,在css或者js里面写上1px,那么实际就是1px,在屏幕 上就是以一个硬件的像素点表示。
也不知道乔布斯是不是第一个在广泛使用的设备上使得“浏览器上声明的屏幕像素”和“屏幕硬件的实际像素”不一致的,对于iphone4,我们都知道它的硬件像素是640*960,然而我们在浏览器里面得到的声明像素确是320*480。
// iphone4、4s的safari中: alert(window.screen.width) // 320 alert(window.screen.height) // 480 alert(window.screen.availWidth) // 320 alert(window.screen.availHeight) // 460
首先需要为了便于描述,我们设:
硬件像素:硬件实际的像素(分辨率),如iphone4就是640*960
参照像素:编写网页前端代码时,定义的密度,它是参照浏览器声明的像素(分辨率)的,如iphone4就是320*480
假设本例中所述网页的head中控制viewpoint的meta中有下列属性:
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
即显示宽度定位设备宽度(设备参照像素的宽度)
对于编写代码和用css构成的各种展现,开发者按照参照像素即可,需要注意和讨论的是使用的图片
举个简单的例子,如果需要在iphone4上一个参照像素为100*100的div充满一张背景图,需要使用一张200*200的图,然后这样设置:
{ width:100px; height:100px; background-image:url(200_200pxImg.png); background-size:100px 100px; }
好了,“硬件像素/参照像素=2”的设备上的图片显示很清晰,用户体验提高了。
但是不要忘记了一点,对于“硬件像素/参照像素<2”的设备,你不需要给那么大分辨率的图,给了它也显示不了那么精细和清晰。
目前来看,设备主要有三种硬件像素和参照像素的比值。对于100*100参照像素的div,它能最清晰且不浪费和缩放任何像素所需的背景图大小如下表所示:
比值 |
常见设备 |
最清晰且不浪费和缩放任何像素所需的背景图大小 |
1 |
大多数传统的设备,如大多数PC、3gs及以前版本的iphone |
100*100 |
1.5 |
相当一部分安卓设备 |
150*150 |
2 |
4及以后版本的iphone、3及以后版本的ipad、retina的macbook、比较高级的安卓系统的设备 |
200*200 |
于是,对于不同的设备,给予表中对应的背景图大小的图片是最理想的。
有如下方法来实现它:
- 使用css的media属性
<link href="d_2.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2)" /> <link href="d_1.5.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" /> <link href="d_1.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1)" />
或者在一个css文件中:
#header { /* 比值为1的css代码 */ } @media screen and (-webkit-device-pixel-ratio: 1.5) { /* 比值为1.5的css代码 */ } @media screen and (-webkit-device-pixel-ratio: 2) { /* 比值为2的css代码 */ }
- 使用javascript判断的方法:
alert(winodw.devicePixelRatio)
- 使用css4的image-set
在这个事情上,你如果想做得激进一些,只为支持这一css4属性的用户提供高清的图片,这一个激进方案的可行性假设基于“想要高清图片效果的用户,对用户体验比较在意,会跟随“时代的步伐”升级他的操作系统和浏览器”background-image: url(100_100pxImg.png); background-image: -webkit-image-set(url(100_100pxImg.png) 1x, url(200_200pxImg.png) 2x); /* 当然 你还需要复制几行其它浏览器厂商的私有标签,如 -moz- */ /* 由于目前市面上没有参照像素1.5,且浏览器为ios6或chrome21以上的设备,url(150_150pxImg.png) 1.5x) 是否能被识别不得而知*/
目前支持的浏览器有:ios6的safari、chrome 21以上。
原文:http://blog.youyo.name/archives/mobile-device-screen-pixel-density.html
相关推荐
Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域,即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要...
如果您需要在多种浏览器尺寸(移动设备,平板电脑,台式机,5k电视)上显示图片,但又不想牺牲基于用户设备的质量或性能,则该库将允许您提供正确的图片任何分辨率下的尺寸。 该组件与允许调整大小的图像服务器一起...
所谓的响应式设计,是指在不同的屏幕分辨率,不同的像素密度比,不同宽度的终端设备中,网页布局可以自适应的调整。响应式设计的本意是使原本PC上的网站兼容移动终端,大部分响应式网页是通过媒体查询,加载不同样式...
衡量设备的物理像素密度 DPI 和 PPI DPI 指 Dots Per Inch(dpi ldpi mdpi hdpi for android) PPI指 Pixels Per Inch。 window.devicePixelRatio = 物理像素/dips(dp) 等效于ddpx dppx : device pixel / css pixel;...
移动设备的尺寸有很多种,它们的屏幕总像素也是不同的,使用px单位的组件尺寸会有不一致的情况。我们看个例子可以看出这个加号icon在分辨率较高,尺寸较大的屏幕上反而显得略小dp(density-independentpixel)是与密度...
基于设备像素密度的图像分辨率 次要断点 阅读更多: 链接: 我的课程笔记 - Udacity 的(2 周免费课程) 99. 使站点具有响应性 第 99 天:2018 年 5 月 7 日 - 星期一 项目: Google Udacity Nan
推动移动电话显示由单色转换为彩色的一个主要趋势...在这样的分辨率下,良好的画质输出以及图片与视频分享变得更加实用,这些更高密度的CMOS成像器件需要从目标获得更多的反射光,因此进一步推动了集成闪光功能的需求。
在这样的分辨率下,良好的画质输出以及图片与视频分享变得更加实用,这些更高密度的CMOS成像器件需要从目标获得更多的反射光,因此进一步推动了集成闪光功能的需求。 1 LED驱动设计的新要求 要将传统的氙气...
您将创建一个响应式移动应用程序,该应用程序不会在不同密度和分辨率的各种移动设备上像素化。 因为,我手头的设计是为 Mobile Portrait 设计的,因此这个应用程序将不支持横向和网络版本。 这意味着,
HUAWEI WATCH星月系列配备1.4英寸屏幕,分辨率达到400×400,拥有286ppi像素密度,0.6mm极 窄边框,屏占比为72%,保留了HUAWEI WATCH的优秀传统。同时AMOLED技术还带来了更高的对比度和节电效果(支持常亮和待机 ...
*对于高像素密度显示器,最小分辨率将根据操作系统建议的缩放级别而变化。 例如,如果操作系统建议缩放级别为200%,则最低要求可能高达2736×1824分辨率。 或者,如果操作系统建议将缩放级别设置为150%,则最低...
Points2Grid 通过OpenTopography设施( )运行的数千个作业得到了证明,Points2Grid是一个强大的可扩展工具,可以使用本地网格方法生成... 如果LIDAR发射密度超过根据这些数据生成的网格的分辨率,Points2Grid所采用的
01.第阶段:基础阶段和产品思维 1互联网思维 1-互联网基础思维1.mp4 2-互联网基础思维2.mp4 3-互联网基础思维3.mp4 4-互联网基础思维4.mp4 5-互联网思维之用户思维1.mp4 6-互联网思维之用户思维2.mp4 ...