2014-12-31更新:
截至到IOS8.1,safari仍不支持@supports
待safari支持@supports, 就可以利用0.5px了!


2014-7-25更新:
1. 修正dpr = 1.5 机器下四角边框的缩放比例;
2. 修正右边框(rBor)的transform-origin为100%, 100%;
3. 添加对 dpr = 3 机器的支持; 通过以下机器验证:小米1(dpr = 1.5)、SAMSUNG S3(dpr = 2)、NEXUS 5(dpr =3) 测试地址:


移动web开发,总避免不了1设备像素边框的问题。本文参考了half-point css border in ios 一文。

理想的

div{
border:1px solid black;
} @media (-webkit-min-device-pixel-ratio: 2){
div{
border-width:0.5px;
}
}

仅有 Firefox和Safari 8 (introduced in OS X Yosemite)支持。twitter有位哥们听到这个消息时,已经不知所云。

现实的

原理简单介绍:content属性与:before 及:after 伪元素配合使用,来插入生成内容,即所需边框。使用transform scale方法将生成内容的边框(或高度或宽度),缩小至合适大小(如0.5倍)。另外,处理好transform-origin值至关重要,下图可以帮助你更好地理解origin值。查看代码或查看此gist,并奉上demo: 继续阅读 →

[转]retina屏下支持0.5px边框的情况的更多相关文章

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

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

  2. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  3. Retina屏下1px border

    layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...

  4. 实现0.5px边框线

    实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...

  5. div背景透明内容不透明与0.5PX边框兼容设置

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

  6. CSS3实现0.5px边框

    用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...

  7. Retina屏实现1px边框

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

  8. 0.5px的边框

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

  1. Python 简易聊天机器人

    聊天机器人 | |-----MySql | |---module--"逻辑运算层" | | | |---ciku--"与词库交互" | | | |---dict ...

  2. Yii ActiveRecord 的via和viaTable示例

    Yii中,将两个不相关的表利用中间表关联有via和viaTable两种方法,这里通过用户权限查询来进行示例. 关系如上,需要建立三个表 用户表 权限表 用户表 数据: 权限表 数据: 关联表 数据: ...

  3. SecureCRT中设置 \n 为回车换行,和 \r\n 的行为一致

    勾上途中红框的选项即可

  4. Android app AOP添加埋点技术总结

    目标:通过面向切面编程来实现对源代码无侵入的埋点.     方式 能力 缺点 学习曲线   XPosed 运行期hook 能hook自己应用进程的方法: 能hook别的应用的方法: 能hook系统方法 ...

  5. empty和isset函数详解

    1.empty函数 用途:检测变量是否为空 若变量不存在则返回 TRUE 若变量存在且其值为"".0."0".NULL..FALSE.array().var $ ...

  6. 浅谈CPU和GPU的区别

    导读: CPU和GPU之所以大不相同,是由于其设计目标的不同,它们分别针对了两种不同的应用场景.CPU需要很强的通用性来处理各种不同的数据类型,而GPU面对的则是类型高度统一的.相互无依赖的大规模数据 ...

  7. 《Linux常用命令》笔记

    ① ifconfig 查看IP状态; ② ls 查看当前路径文件信息,参数: -l 查看文件的详细信息与ll效果一样; -a 查看文件的全部信息; ③ man 查询当前指令的信息,查询可用字母q退出; ...

  8. Python flask @app.route

    转载自 http://python.jobbole.com/80956/ 下面是Flask主页给我们的第一个例子,我们现在就由它入手,深入理解“@app.route()”是如何工作的.         ...

  9. IT路上爹爹装装遇到的坑

    1.中英文字符格式:UTF-8 有BOM和无BOM Notepad++ Edit-Plus emacs vim Sublime Text3 记事本 有,无 UTF-8+ #coding:utf-8   ...

  10. androidstdio偶遇一

    android的错误 今天在安装androidstdio的过程中产生了遇到了一个错误(之前一直没有重新安装,因为觉得麻烦,但是电脑慢成狗了,只好重新安装....)那么现在步入正题.     首先安装的 ...