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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <title></title>

</head>

<body>

    <div style="width:100px;height:0.5px;background:red;margin:10px;"></div>

    <div style="width:100px;height:1px;background:red;margin:10px;"></div>

    <div style="width:100px;height:1px;background:red;margin:10px;-webkit-transform: scaleY(0.5);transform:scaleY(0.5);-webkit-transform-origin:0 0;transform-origin: 0 0;"></div>

</body>

</html>

if (window.devicePixelRatio && devicePixelRatio >= 2) {

  var testElem = document.createElement('div');

  testElem.style.border = '.5px solid transparent';

  document.body.appendChild(testElem);

  if (testElem.offsetHeight == 1)

  {

    document.querySelector('html').classList.add('hairlines');

  }

  document.body.removeChild(testElem);

}

1px的更多相关文章

  1. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  2. [半转]1px边框 移动端

    半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...

  3. 移动端视网膜（Retina）屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  4. [Cordova] 手机网页里的1px

    [Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素 ...

  5. iOS去除导航栏和tabbar的1px横线

    1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了 去除之前的图片 要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIIm ...

  6. css中的1px并不总等于设备的1px（高分辨率不等 低分辨等）

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  7. 移动端1px

    移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...

  8. Retina屏实现1px边框

    问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...

  9. 关于移动端1px边框问题

    <div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:&l ...

  10. 解决CSS移动端1px边框问题

    移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...

随机推荐

  1. struts2框架加载配置文件的顺序

    struts-default.xml:该文件保存在struts2-core-x.x.x.jar文件中: struts-plugin.xml:该文件保存在 struts2-Xxx-x.x.x.jar等S ...

  2. Java的云打印Lodop

        打印某一个网页上的内容我们都经常遇到过,比如网上申请港澳通行证时需要填写申请表,然后把申请表给打印出来.像这样的打印技术是怎么实现?这种打印可以通过一种叫云打印的插件来做,按我的理解云打印的技 ...

  3. 2014年9月21日_随笔，jdic,ETL,groovy,Nutz好多东西想学

    (1)老妈十一要回老家,才突然发现买票好难啊.有亲朋很重要 (2)这周我做了什么.jdic,ETL,groovy, Nutz好多东西想学. Nutz开发成员专访.Nutz优酷视频(演讲).Nutz 入 ...

  4. 03_MySQL中文乱码处理_01_MySQl数据库字符集知识

    [MySql数据库常见字符集介绍] 在互联网环境中,使用MySql时常用的字符集有: [如何选择合适的字符集] 1.如果处理各种各样的文字,发布到不同语言的国家地区,应选Unicode字符集,对MyS ...

  5. HDU 3127 WHUgirls（DP 完全背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3127 题目大意:将一块长x宽y的矩形布料,剪成小的矩形(每个给定的小矩形都对应一个价值),使得所有小矩 ...

  6. ZOJ 1091 (HDU 1372) Knight Moves（BFS）

    Knight Moves Time Limit: 2 Seconds      Memory Limit: 65536 KB A friend of you is doing research on ...

  7. Codevs 1507 酒厂选址

    1507 酒厂选址 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description Abstinence(戒酒)岛的居民们酷爱一种无酒精啤酒 ...

  8. (转)IOS学习笔记-2015-03-29 int、long、long long取值范围

    unsigned - - unsigned - - unsigned __int64的最大值: __int64的最小值:- unsigned __int64的最大值:  

  9. 网站开发常用jQuery插件总结(14)图片修剪插件Jcrop

    一.插件功能 用于对图片进行修剪.但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用. 二.官方地址 http://deepliquid.com/content/Jc ...

  10. jquery右下角返回顶部

    实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置.要先 ...