前端面试中的1像素问题到底是指什么

高清屏上,border: 1px的处理

其实并不是所有做移动端适配的人,都一定会遇到这个问题。

比如你的设计师给了一张iphone6为基准的 750*1334 的设计稿,里面有一个border标注的是1px。

所以设计师实际上想要的是retina屏下的1px,也就是普通屏幕下的0.5px。

但问题是: 并不是手机端屏幕都支持0.5px,ios7之下或者安卓机都可能把0.5解析成0px

这里给到一种解决方案: 设置initial-scale=0.5

<meta name=”viewport” content=”width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no”>
这样，页面中的所有的border: 1px都将缩小0.5，从而达到border: 0.5px;的效果。

然而，页面scale，必然会带来一些问题：

字体大小会被缩放
页面布局会被缩放(如: div的宽高等)