威尼斯手机娱乐官网高清屏概念解析与检测设备
分类:计算机知识

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

2017/02/06 · CSS · 像素比

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

一些基本概念

** viewport 视窗 **

在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上,假如没有viewport,移动端会采用桌面版的屏幕宽度,然后适应屏幕进行缩放。设置viewport可以控制页面的宽度并且在不同的设备上进行缩放。
(A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.)

移动端提供了两个viewport,虚拟的viewport:visual viewport和布局的viewport:layout viewport。Stack Overflow上有深入的讲解。

** 物理像素 & 设备独立像素 & CSS像素 **
** 物理像素 **又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

** 设备独立像素 **也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

CSS设置的像素值(px)属于普通像素点,或者是标准像素点。CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

** devicePixelRatio 设备像素比 **
设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

设备像素比 = 物理像素 / 设备独立像素

** 高清屏和普通屏幕 **
高清屏和普通屏来做对比就是普通屏幕的1个像素点就是1个物理像素点,而高清屏的1个像素点是4个物理像素点。
通过计算 devicePixelRatio 的值,可以区分普通显示屏和高清显示器,当devicePixelRatio值等于1时(也就是最小值),那么它是普通显示屏,当devicePixelRatio值大于1(通常是1.5、2.0),那么它就是高清显示屏。
比如iPhone6的devicePixelRatio为2,所以是高清显示屏。iPhone6s plus这种高清屏dpr是3。

** REM **
REM就是相对于根元素<html>的font-size来做计算。因为网页<html>的默认字体大小是 16px,所以

1rem=16px ,10rem=160px


前言

做移动端h5开发很久了,从开始入行到现在。很多知识和工具都是在用前辈留下的遗产,都没有深入的研究过原因,了解为什么要这么去做。

也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间,把最近看到的知识总结一下,也算是对这方面的知识划上一个句号。想想着实把国庆节过成了劳动节,没办法,自己就是这样的一个人,“应该去做的,而且有能力做的,如果不去做,心里面总是不舒服”

这篇文章的内容主要分为两个部分:

  1. 高清屏(Retina)相关概念解析和高清屏(Retina)与前端开发的关系;
  2. 前端开发过程中使用什么手段区分高清屏普通屏幕,并且衍生出的适配方案;

注:本篇文章的所有图片来源于网络,如有侵权请告知。

Retina屏幕1px产生的问题

因为viewport的设置和屏幕物理分辨率是按比例而不是相同的,<meta>标签里实际上是设置了ideal viewport的宽度,而不同手机的ideal viewport宽度是不一样的。移动端window对象有devicePixelRatio属性,CSS里写1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px。

威尼斯手机娱乐官网 1

1px的效果

威尼斯手机娱乐官网 2

1px被显示成2px

图片来自Retina屏的移动设备如何实现真正1px的线?


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

如何实现Retina屏幕上1px的效果

1. 高清屏概念解析

高清屏(Retina)概念的兴起主要是从乔帮主发布 Retina 设备开始兴起。主要功能如下:

具备足够高的物理像素密度而使人体肉眼无法分辨其中单独像素点的液晶屏。

特点如下:

  1. 一种具备超高像素密度的液晶屏;
  2. 同样大小屏幕上显示的像素点由一个变为多个;

看一张乔帮主当年发布 高清屏(Retina)时的一张照片:

威尼斯手机娱乐官网 3

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

方法一 Viewport + REM

通过viewport + REM的方式来兼容,(淘宝移动端的方法)使用JS动态获取屏幕的设备像素比devicePixelRatio,然后动态设置viewport。

devicePixelRatio=2的时候,控制viewport的initial-scale值为0.5进行缩放
<meta name="viewport" content="initial-scale=0.5, user-scalable=no"/>
devicePixelRatio=3的时候,
<meta name="viewport" content="initial-scale=0.333333, user-scalable=no"/>
Android下不支持initial-scale,虽然这不适用于安卓, 但它里面的这一段代码可以用来做对安卓机的部署.

    if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下(比如安卓),仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}```


对于安卓机做检测,动态加载CSS

var link = document.createElement('link');
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
link.setAttribute("href",".......Android.css");
document.querySelector('head').appendChild(link);```

这个方案结合了viewport和rem,所以使用的时候要考虑到REM布局。另外,REM布局下字体的单位仍建议使用px,还有出现1px像素线的地方,也仍旧使用border-width:1px;而不是border-width:.1rem;

2.物理像素点和css的关系

先来看一张图:

威尼斯手机娱乐官网 4

由上面的图我们可以知道,当我们使用css设置了一个区域以后,高清屏含有的像素点数是普通屏的4倍。而css设置的像素值(px)属于普通像素点,或者是标准像素点。

那么我们平时在普通屏幕中正常显示的位图图像放在高清的屏幕上会有什么问题呢?由上面的知识可以知道,普通屏幕的1个CSS像素点对应4个高清屏幕的像素点,1个分成4个,不够分的情况下,颜色会取近似值。所以在高清屏上,在普通屏幕正常显示的图片会变的模糊。

可以看下图来加深理解:

威尼斯手机娱乐官网 5

这就是为什么我们现在的设计稿为什么都会设计成2倍稿的原因。为了兼容高清屏幕的图片高清晰显示,我们的裁切图是2倍图,在css中使用的时候会使用css压缩2倍。

比如,我们有一个icon.png的文件,切图大小是 200×200 。而我们使用的时候却是使用css设置其大小为100×100。这样基本上就会保证普通屏和高清屏显示一致。

威尼斯手机娱乐官网 6

方法二 Media Query

根据屏幕的设备像素比来加载不同图片可以使用CSS的Media Query来解决,它对应devicePixelRatio有几个查询值-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio,但是这样我们就要切图片的一倍图和二倍图。

.img{ /* 普通显示屏(设备像素比例小于等于1.3)使用一倍图 */ 
    background-image: url(img_1x.png);
}
@media screen and (-webkit-min-device-pixel-ratio:1.5){
.img{/* 高清显示屏(设备像素比例大于等于1.5)使用二倍图  */
    background-image: url(img_2x.png);
  }
}```
据说IOS8以上CSS可以用小数点,理论上可以这样写。

.border {
border: 1px solid #ffffff;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #ffffff; }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #ffffff; }
}```
但是由于安卓与低版本IOS不适用,所以不推荐这种写法。

css压缩真的能保证完全一致么?

看了一些网友的文章。css压缩会使图片边缘的锐度减小。

下面是我做的一个简单的实验,比如说我现在有一个276×90的图标文件。我直接把它设置为一个div的背景,在浏览器中看效果:

代码如下:

XHTML

<div class="item3"></div>

1
<div class="item3"></div>

CSS

.item3{ height:45px; width:138px; background:url(./4.png) no-repeat center; background-size:100% 100%; }

1
2
3
4
5
6
.item3{
    height:45px;
    width:138px;
    background:url(./4.png) no-repeat center;
    background-size:100% 100%;
}

在网页中的效果如下图:

威尼斯手机娱乐官网 7

我把这张图截取下来放到 PS 中放大,之后的效果如下图,可以明显看到在有颜色的字体边缘的颜色变浅,图像周围的锐度减小。

威尼斯手机娱乐官网 8

其实,在我们的开发过程中完全没有必要去在意这里的这个细节问题,图像边缘的锐度也是在 PS 中放大了好多倍以后才看出来的,如果是人的肉眼是根本看不出来的。

方法三 box-shadow

利用CSS对阴影处理的方式实现
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点是基本所有场景都能满足,包含圆角的button,单条,多条线。
缺点是颜色不好处理, 黑色 rgba(0,0,0,1) 是最浓的情况,而且有阴影出现。

2. 高清屏(Retina)和前端开发的关系

由上面的知识可以知道。当我们在高清屏中使用普通图片的时候,相当于图片被放大了一倍(可以这么理解:普通屏幕的1px相当于高清屏的2px)。

因为安卓产品的参差不齐和厂商对屏幕制造标准的标准不一样。这个放大的比例并不是固定的。还好我们有一个叫设备像素比的东西来检测当前屏幕是不是属于高清屏幕。

设备像素比的英文单词为devicePixelRatio。它有一个计算公式如下:

devicePixelRatio=屏幕物理像素/设备独立像素

devicePixelRatio其实就是window对象的一个属性,它被大多数的webkit浏览器所支持。看下图是我在我的MacBook Pro上的Chrome中做的测试。很明显是属于高清屏哈ヾ(=^▽^=)ノ

威尼斯手机娱乐官网 9

上面是对设备像素比的东西 做了一个简单的了解,下面就来详细了解下几个比较重要的概念。

设备独立像素(device independent pixels)又叫dip或者是dp。它可以用来辅助区分高清屏幕和非高清屏幕。

我们可以通过两个典型的手机来理解上面的概念。iphone3gs和iphone4的屏幕最大的区别就是前者是普通屏幕而后者是使用了高清的retina屏幕。以下是我查到的一些参数信息:

下面的是iphone3gs屏幕信息:

威尼斯手机娱乐官网 10

下面是iphone4s屏幕信息:

威尼斯手机娱乐官网 11

在iphone3gs垂直的时候,屏幕的宽度为320物理像素。当我们使用<meta name="viewport" content="width=device-width">的时候,会设置视窗布局宽度为屏幕的宽度320px,于是页面就很自然的覆盖在屏幕上。

威尼斯手机娱乐官网 12

所以在iphone3gs上屏幕的物理像素位320像素,独立像素也是320像素。因此window.devicePixelRatio=1

而对于iphone4s来说,当屏幕纵向显示的时候,屏幕的物理像素是640像素,而视区宽度不是640像素而是320像素。

这样在iphone4s上,屏幕的物理像素为640像素,独立像素还是320像素,因此window.devicePixelRatio=2

由上面的举例相信已经对设备的物理像素和独立像素有了一个认识,那么总结如下:

  • 设备的物理像素(也叫设备像素),就是屏幕显示颜色的最小的物理单元,也就是我们经常看到的手机分辨率所描述的数字;
  • 设备独立像素(与密度无关的像素),就是我们手机的实际的视窗口的大小。具体来说可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
方法四 background-image背景渐变实现

通过CSS修改image,设置图片50%有颜色,50%透明,实现1px的效果。
linear-gradient属性一个表示颜色线性渐变的 image,语法是linear-gradient([ [ [ <angle>| to[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);详细讲解看MDN文档

.border {
      background-image: linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px, 1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }```
这个方法代码量大,而且无法实现边框的圆角效果。

##### 方法五 border-image
![6X6的图片](http://upload-images.jianshu.io/upload_images/4938344-0320e1b1f4cde23b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图片可以是gif、png、base 64,

.border{
border-width: 1px;
border-image: url(border.png) 2 repeat;
}```
缺点

  • 想要实现圆角效果的话要放大修改图片
  • 边框颜色不方便修改
  • 边框存在多种颜色的时候麻烦

怎么区分高清屏和普通屏幕及其适配方案

通过对于第一部分的了解,我们可能已经知道怎么区分高清屏和普通屏了。网上网友总结的结论如下:

通过计算 devicePixelRatio 的值,是可以区分普通显示屏和高清显示器,当devicePixelRatio值等于1时(也就是最小值),那么它普通显示屏,当devicePixelRatio值大于1(通常是1.5、2.0),那么它就是高清显示屏。

那么这部分,就来简单的了解下我们平时在开发过程中,对于我们使用的图片怎么适配高清屏和普通屏。

原理也很简单,就是根据不同的设备像素比来加载不同的图片:

  1. 针对普通显示屏(devicePixelRatio = 1.0、1.3),加载一张1倍的图片
  2. 针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0),加载一张2倍大的图片
方法六 transform: scale(0.5)+伪元素:before, :after

原理去掉把原先元素的 border ,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 属性将元素大小缩小为设置的值的一半,将原先的元素相对定位,新写的 border 设置绝对定位。

使用样式的时候,要结合 JS 代码,判断是否 Retina 屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector('.box').className += 'box';
}```
看一下demo代码:

.box {
border: none;
position: relative;
z-index: 3;
}
.box :before {
content: '';
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
color: #0b2029;
border-radius: 8px;
border: 2px solid #737373;
font-size: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
z-index: -1;
}```

:before和:after 是用来给指定的元素的内容前面或后面插入新的内容。给:before添加了属性 content并设置为空(对于伪元素 :before 和 :after 而言,属性 content 是必须设置的否则伪元素不会生效),然后给它设置我需要的样式的两倍大小,再设置transform: scale(0.5);就实现了1px的效果。像这里的demo代码,我的box里面有input,所以要设置index,否则input就会被覆盖。

注意<input type="button">没有:before, :after伪元素。

ps:起初,伪元素的前缀使用的是单冒号语法,但为了和伪类(pseudo-classes)”区分开,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before & ::after ,但是因为IE8只支持单冒号的语法,所以如果你想兼容IE8,保险的做法是使用单冒号。

对于大型的项目,推荐使用手淘的flexible方案,小型的页面用 transform: scale(0.5)+伪元素:before, :after较为方便。

1.Media Queries的解决方案

根据屏幕的设备像素比来加载不同图片可以使用css 的media queries来解决,当然使用css来解决也是兼容性最好的解决方案(其实意味这我们要切两套图片1倍图和2倍图)。

示例的demo如下:

CSS

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ background-image: url(img_1x.png); } @media only screen and (-webkit-min-device-pixel-ratio:1.5){ .css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */ background-image: url(img_2x.png); } }

1
2
3
4
5
6
7
8
.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

CSS Media Queries的优点

  • 只有对应的目标元素才会下载图片资源
  • 跨浏览器兼容
  • 像素可以精确控制

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:威尼斯手机娱乐官网高清屏概念解析与检测设备

上一篇:分享10个优化代码的CSS和JavaScript工具,代码静态 下一篇:威尼斯手机娱乐官网其次局地
猜你喜欢
热门排行
精彩图文