.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff3300; display: block; content: ''; position: absolute; top:; right:; bottom:; left:; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer…

问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示成2px.这对于拥有像素眼的设计同事来说是无法忍受的,他们会一眼看出这边框粗了很多(真可怕,不过经历这次问题之后,感觉自己也练成了像素眼),并且在用户体验上略差,所以现在要解决的问题就是在retina屏幕下实现1px的边框. 解决方案 查找了一些资料,也对比了很多方案,个人认为这个是css的问题,所…

layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,一般有以下几种方法: 图片 阴影 缩放 移动版开发采用软图片的方法: .border { background-image:linear-gradient(180deg, red, red 50%, transparent 50%), l…

我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比devicePixelRatio”      设备上物理像素和设备独立像素(device-independent pixels (dips))的比例.      公式表示就是:window.devicePixelRatio = 物理像素 / dips   dip或dp,(device independen…

做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePixelRatio=3 的屏幕上会显示成 3px,明明希望是极细的线条,到 Retina 屏上却变得粗大丑陋.这是因为 CSS 中的 px 单位定义的是逻辑像素值,而实际显示的效果会以物理像素呈现,Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异. 如果想让 HTML5 页面像 Nativ…

Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西,除此之外,inline的SVG等元素,也会按照逻辑像素来渲染,整个页面的清晰度会打折: 先看看  “诸子百家 ”  是如何实…

文章转载自 酷勤网 http://www.kuqin.com/ 原文链接:http://www.kuqin.com/shuoit/20150530/346322.html 原文摘要:前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决? 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对…

首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 解决边框变粗的办法 1.0.5px边框 在2014年的 WWDC,“设计响应的Web体验” 一…

前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… 上图是原生实现,下图是 CSS 边框,手机上对比更加明显 然后,如何解决呢?搜遍整个谷歌,发现好多人早已开始研究解决方案了.到底有哪些方案,到底好不好用呢?试过才知道,把我试过的结论记录一下. 有说用 0.5px 解决的 在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Co…

我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比devicePixelRatio” 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips   dip或dp,(device independent pixels,设备独立像…