技术控

    今日:57| 主题:49101
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 高清屏概念解析与检测设备像素比的方法

[复制链接]
花落满茵席 发表于 2016-10-6 08:52:48
135 7

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
前言

  做移动端h5开发很久了,从开始入行到现在。很多知识和工具都是在用前辈留下的遗产,都没有深入的研究过原因,了解为什么要这么去做。
  终于在国庆节有一个大块的时间,把最近看到的东西总结一下,也算是对这方面的知识划一个句号。着实把国庆节过成了劳动节,没办法,自己就是一个这样的人,“有些应该去做的,而且有能力做的,但是不把它给做了,心里面总是不舒服”。
  这篇文章的内容主要分为两个部分:
  
       
  • 高清屏相关概念解析与和其与前端开发的关系;
       
  • 前端开发过程中使用什么手段区分高清屏和普通屏幕,并且适配的方案;
      
  注:本篇文章的所有图片来源于网络,如有侵权请告知。

  高清屏概念解析和前端开发的关系

  1. 高清屏概念解析

   高清屏概念的兴起主要是从乔帮主发布 Retina 设备开始兴起。主要功能就是:
  具备足够高的物理像素密度而使人体肉眼无法分辨其中单独像素点的液晶屏。
  特点如下:

  
       
  • 一种具备超高像素密度的液晶屏;
       
  • 同样大小屏幕上显示的像素点由一个变为多个;
      
  看一张乔帮主当年发布会的一张照片:
   
高清屏概念解析与检测设备像素比的方法-1 (智能手机,检测设备,开发者,苹果,平板)

   由乔帮主背后的那两张图可以发现,高清屏和普通平的主要区别就是: 高清屏和普通屏相比,相同区域的物理像素点数,高清屏是普通屏的4倍。
  2. 物理像素点和css的关系

  先来看一张图:

高清屏概念解析与检测设备像素比的方法-2 (智能手机,检测设备,开发者,苹果,平板)

   由上面的图我们可以知道,当我们使用css设置了一个区域以后,高清屏含有的像素点数是普通屏的4倍。而 css设置的像素值(px)属于普通像素点,或者是标准像素点。
  那么我们平时在普通屏幕中正常显示的位图图像放在高清的屏幕上会有什么问题呢?由上面的知识可以知道,普通屏幕的1个CSS像素点对应4个高清屏木的像素点,1个分成4个,不够分的情况下,颜色就会取近似值。所以在高清屏上,在普通屏幕正常显示的图片会变的模糊。
  可以看下图来加深理解:
1234下一页
友荐云推荐




上一篇:编程思想之消息机制
下一篇:React Native填坑之旅--ListView篇
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

78894769 发表于 2016-10-20 18:42:31
待我长发及腰,少年娶我可好?
回复 支持 反对

使用道具 举报

w1943se 发表于 2016-11-7 20:13:49
替楼主问候看帖不回帖的!
回复 支持 反对

使用道具 举报

竹痴 发表于 2016-11-12 19:25:39
技术控节操掉一地
回复 支持 反对

使用道具 举报

极爱哦12 发表于 2016-11-13 05:14:07
看来楼下的有话说!
回复 支持 反对

使用道具 举报

夜店、情殇 发表于 2016-11-16 11:33:48
泥泞路上的奔驰,永远跑不过高速路上的夏利。说明:”平台很重要!”
回复 支持 反对

使用道具 举报

爱生活爱SEO 发表于 2016-11-18 20:13:42
占位编辑
回复 支持 反对

使用道具 举报

pingguo99 发表于 2016-11-20 11:44:36
报告!别开枪,我就是路过来看看的。。。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表