我们在开发移动端web项目时经常遇到设置border:1px，但是显示的边框却为2px或是3px粗细，这是因为设备像素比devicePixelRatio为2或3引起的。
 
1、何为“设备像素比devicePixelRatio”
     设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
     公式表示就是：window.devicePixelRatio = 物理像素 / dips   dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素。当你使用<meta name="viewport" content="width=device-width">的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为320px, 于是，页面很自然地覆盖在屏幕上。这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.

      而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置<meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。
这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.

每个像素点实际上有4倍的普通像素点，如下示意(© smashingmagazine)：

1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色近似选取，于是，图片感觉就是模糊的(© smashingmagazine)！。这就是为什么使用两倍图。

视网膜屏幕下图片就显示OK了（非视网膜屏幕图片被压缩-减少像素取样——资源浪费！）
 
 2、各“设备像素比”对应的设备
-webkit-min-device-pixel-ratio为1.0
  1. 所有非Retina的Mac
  2. 所有非Retina的iOS设备
  3. Acer Iconia A500
  4. Samsung Galaxy Tab 10.1
  5. Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
  1. Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
  1. Google Nexus S
  2. Samsung Galaxy S II
  3. HTC Desire
  4. HTC Desire HD
  5. HTC Incredible S
  6. HTC Velocity
  7. HTC Sensation
-webkit-min-device-pixel-ratio为2.0
  1. iPhone 4
  2. iPhone 4S
  3. iPhone 5
  4. iPad (3rd generation)
  5. iPad 4
  6. 所有Retina displays 的MAC
  7. Google Galaxy Nexus
  8. Google Nexus 4
  9. Google Nexus 10
  10. Samsung Galaxy S III
  11. Samsung Galaxy Note II
  12. Sony Xperia S
  13. HTC One X

-webkit-min-device-pixel-ratio为3.0

  1. iPhone 6 plus
  2. iPhone 6s plus
 
3、javascript获取“设备像素比”
document.getElementById("button").onclick = function() {
    alert(window.devicePixelRatio);       
};
 
4、Demo实例
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>移动设备的1px边框(默认1px的线太粗，用背景模拟)</title>

    <style>

        .bordercase,.borderbottom,.borderright{

            border: 1px solid #000;

        }

        h1{font-size: 15px;}

        a.bt{display: inline-block;height:30px; red;color: #fff;}

        .borderbottom{#fff;font-size: 15px;}

        @media (-webkit-min-device-pixel-ratio: 2){

        .borderbottom {

        border: none;

        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,#000000),color-stop(100%,#000000));

        background-image: -webkit-linear-gradient(top,transparent 50%,#000000 50%,#000000 100%);

        background-image: linear-gradient(to bottom,transparent 50%,#000000 50%,#000000 100%);

        background-size: 100% 1px;

        background-repeat: no-repeat;

        background-position: bottom;

        }

        @media (-webkit-min-device-pixel-ratio: 2){

        .borderright {

        border: none;

        background-image: -webkit-gradient(linear,left top,right top,color-stop(50%,transparent),color-stop(50%,#000000),color-stop(100%,#000000));

        background-image: -webkit-linear-gradient(left,transparent 50%,#000000 50%,#000000 100%);

        background-image: linear-gradient(to right,transparent 50%,#000000 50%,#000000 100%);

        background-size: 1px 100%;

        background-repeat: no-repeat;

        background-position: right;

        }

        @media (-webkit-min-device-pixel-ratio: 3){

        .borderbottom {

        border: none;

        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(65%,transparent),color-stop(65%,#000000),color-stop(100%,#000000));

        background-image: -webkit-linear-gradient(top,transparent 65%,#000000 65%,#000000 100%);

        background-image: linear-gradient(to bottom,transparent 65%,#000000 65%,#000000 100%);

        background-size: 100% 1px;

        background-repeat: no-repeat;

        background-position: bottom;

        }

    }

    </style>

</head>

<body>

    <ul>

        <li>

            <h1>问题：border:1px，在手机设备上是2px或是3px，Why？？？

            </h1>

            <div class="bordercase">为什么我的边框那么大？ 说好的1像素呢？？？  瞬间各种不爱了。。。。。。

            .bordercase{border: 1px solid #000;}</div>

        </li>

        <li><h1>1、何为“设备像素比devicePixelRatio”</h1>

            <p>设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips   dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。</p>

        </li>

        <li>

            <h1>2、“Retina”屏呈像原理</h1>

            <img src="page1.png" height="284" width="500" />

            <img src="page2.png" height="168" width="500"/>

        </li>

        <li><h1>3、获取设备的devicePixelRatio(开启Chrome浏览器可以看到各种类型设备的像素比)</h1>

                    <a class="bt" id="bt" onclick="alert(window.devicePixelRatio);">点击我查看设备的devicePixelRatio</a>

        </li><li><h1>4、解决方法(通过背景模拟边框线，把1px一分为二)</h1>

            <a class="bt" href='https://jsfiddle.net/starrycheng/6ndbw6ax/1/'" target="_blank">jsfiddle地址</a>

            <div class="borderbottom">看我下边框(在手机上才能看到我，在模拟器里有时候是看不到的。)</div>

              <br/>

              <br/>

              <br/>

            <div class="borderright">看我右边框(在手机上才能看到我，在模拟器里有时候是看不到的。)</div>

            <br/>

            <br/>

            <br/>

            <br/>

            <div>

            <br/>

            我的代码样式代码  <br/>

            @media (-webkit-min-device-pixel-ratio: 2){

            <br/>

            .borderbottom {

        border: none;（定义元素无边框）

        <br/>

        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,#000000),color-stop(100%,#000000));（//-webkit老式语法书写规则：线性渐变，从中间到下，颜色逐渐加深。50%从中间开始。从透明效果开始。）

        <br/>

        background-image: -webkit-linear-gradient(top,transparent 50%,#000000 50%,#000000 100%);(//-webkit最新发布书写语法：线性渐变，从中间到下，颜色逐渐加深。50%从中间开始。从透明效果开始。)

        <br/>

        background-image: linear-gradient(to bottom,transparent 50%,#000000 50%,#000000 100%);（//HTML5标准写法：线性渐变，从中间到下，颜色逐渐加深。50%从中间开始。从透明效果开始。）

        <br/>

        background-size: 100% 1px;（背景大小1像素，100%的宽度）

        <br/>

        background-repeat: no-repeat;（不重复）

        <br/>

        background-position: bottom;（背景出现位置）

        }}</div>

        </li>

    </ul>

</body>

</html>

各位大神还有什么其它的解决方案欢迎讨论，谢谢。

移动端Retina屏边框线1px 显示为2px或3px问题解决方法的更多相关文章

  1. 移动端Retina屏boder 1px显示为2px或3px的解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...

  2. 移动端 Retina屏 各大主流网站1px的解决方案

    Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...

  3. Retina 屏移动设备 1px解决方案

    做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePix ...

  4. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  5. xp系统重绘边框线不显示（首次加载没有触发paint事件）

    同样是,重绘边框事件,win7系统显示正常,而xp系统却不显示,这是什么原因造成的呢? 于是,小编开始百度,不停的查找原因,通过一番查找,小编也意外的收获了一些内容: 例如:窗口的拖动,放大,缩小,等 ...

  6. 移动端下网页border：1px显示

    解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewpor ...

  7. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  8. 7种方法实现移动端Retina屏幕1px边框效果

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  9. Retina屏的移动设备如何实现真正1px的线

    前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… ...

随机推荐

  1. 可能空字符串转换为浮点型或者整数型:java.lang.NumberFormatException: For input string: " "

    Integer.valueOf(str.equals("")?"0":str)

  2. 关于“Durian”调查问卷的心得体会

    这周我们做了项目着手前的客户需求调查,主要以调查问卷的方式进行.其实做问卷调查并不是想象中的那么简单,首先要确定问卷调查的内容,每一个问题都要经过深思熟虑,字字斟酌,既要切合问卷主要目的,又要简洁扼要 ...

  3. 强关联二维材料1T—TaS2晶体

    我校物理系张远波教授课题组通过一种新的实验方法——可控电荷插层,实现了对强关联二维材料1T—TaS2晶体相变的全面研究.1月26日,相关研究论文Gate-tunable phase transitio ...

  4. ubuntu连有线网 无法连接外网

    问题:连上网线后,有ip,但是无法访问外网. 我的解决方案是: .通过命令行ifconfig命令查看以太网(即网线插口)的名称,如下图,'enp3s0'是网线插口(Ethernet以太网): zhum ...

  5. php使用jquery Form ajax 提交表单，并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  6. Adplus 抓取Crash Dump

    本实例在win8.1 安装window kits https://developer.microsoft.com/en-us/windows/hardware/windows-driver-kit 1 ...

  7. sql优化常用命令总结

    1.显示执行计划的详细步骤 SET SHOWPLAN_ALL ON; SET SHOWPLAN_ALL OFF; 2. 显示执行语句的IO成本,时间成本 SET STATISTICS IO ON SE ...

  8. [PHP] constant variable

    print: 3.13 PI 3.14

  9. geoserver笔记

    geoserver中只支持shp 的数据的发布,也就是.shp的数据.其他的如mapgis的数据则需要转成.shp的格式 要发布地图数据为WMS服务,首先得建立工作空间(也可以使用现有的工作空间),然 ...

  10. winXP使用

    1.获得管理员权限 开机启动时按F8-->进入“安全模式”-->选择“Administrator”-->点击登录 2.Windows XP属于单用户多任务操作系统,Linux属于多用 ...