问题描述 通常我们实现边框的方法都是设置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…

原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css: div{ border:1px solid #000; } @media (-webkit-min-device-pixel-ratio: 2) { div{ border:0.5px solid #000; } } 但在ios7以…

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

.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…

我们在开发移动端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…

本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了.. 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三种…

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

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe…

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

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe…

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

本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了. . 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三…

一.问题    写H5的样式时候,设置元素的边框为1px,不幸的事情在IOS设备上发生了,设计师会说,咦,边框怎么那么大,这是2px了吧?改成1px.我明明设置成1px了啊. 二.为什么边框变粗了? IOS使用的是retina屏,因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px.所系css设置1px的样式,实际是2px的效果.devicePixelRatio的官方定义:"设备物理像素和设备独立像素的比例,也就是de…

问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像素比.即devicePixelRatio=物理像素/独立像素.iPhone使用的是Retine屏,“Retina”是一种显示技术,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度.因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRa…

物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 设备独立像素(density-independent pixel) 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素. 所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比. 设备像素比(devic…

一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出<禅与摩托车维修艺术>,哈哈哈哈). 两种像素 物理像素:设备屏幕实际拥有的像素点.比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素. 逻辑像素:也叫“设备独立像素”(Device Independent Pix…

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

在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义边框,伪元素定义1px边框,并且根据根据像素比值设置缩放比例,像素比为3时设置为0.33,像素比为2时设置0.5. HTML: <div class="border-1px"></div> CSS: .border-1px { position: relative;…

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个物理像素使用,即使用 2x2 个像素显示原来 1 个物理像素显示的内容,从而让 UI 显示更精致清晰,这 2x2 个像素叫做逻辑像素.像这种像素比(像素比(即dpr)＝ 物理像素 / 逻辑像素)…

(1).把边框设置为absolute,使用after,定义宽度为1px(mixin.styl) (2).通过@media,判断不同的dpi,来改变相应的Y轴宽度(base.styl),定义公共class border-1px,在用到1px边框的地方,加上border-1px 设备像素 又叫物理像素 是显示屏能够控制的最小显示单位. css像素 它就是css上用的像素: border: 1px solid black; 它是web编程抽象的概念,不存在的, 它独立于设备, 用于在逻辑上衡量像素 设…

在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配,在IOS设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale 来达到目的. 但是,现在很多的安卓手机也是高分辨率的屏幕,有些1px边框的按钮和列表会显得特别粗,flexible.js 只处理了IOS的手机,所以安卓手机需要我们自己处理. JS处理 首先,可以通过 window.devicePixelR…

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i…

问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位 单条边框: .hairlines li{position: relative; border:none; } .ha…

半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. 网上找了一下,自己总结了一下. 实现方法代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width…

Photoshop CS6 MAC 中文版破解版 支持Retina屏 目前世界上“最好的化妆品”是一款叫做PhotoShop的产品,它可以帮你去除所有你不满意的地方.上周末,这款最好的化妆品推出了第十三代产品——Adobe PhotoShop CS6 ,所有感兴趣的用户都可以免费下载试用. 此次发布的PS CS6 包括大量优化和调整以及在CS5基础上的一些小升级.最直观的变化要数CS6的整体色调改成更深的灰黑色,按Adobe的说法是为了让用户把注意力更好的放在图片处理上. 详细的介绍不用多说了,…

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"…

最近在使用MyEclipse时最让我头疼的问题就是MyEclipse并不能很好的支持苹果的Retina屏幕,看着字体会非常模糊,那叫一个心酸,真白瞎了这块好屏幕.(不知道最新的版本有没有支持,反正我的是MyEclipse10是支持不了,四处查了半天资料,发现网上有的太不详细,有的根本不管用,所以特地来分享一下,我的是10.10.3的系统). 首先,需要找到应用程序里的MyEclipse.app右键显示包内容-->Contents-->Profile-->然后右键MyEclipse显示包内…

用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪类相对于这个元素是一个绝对定位,通过伪类画一个1px边框,然后把它定位到元素的下面,就变成一个下边框. border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0…