怎样在 iPhone 4 的 Safari 里画 1px 的 border？

今天稀里糊涂地看了一堆文章，还是没明白怎样在 iPhone 4 的 Safari 里控制尺寸。
有人说 iPhone 4 里 1pt=2px，但我试图用 pt 来写 CSS，不成功，尺寸奇怪。
后来稀里糊涂地就正常了，能达到我的需求：在 Mac 上以 640×960px 显示，便于截图；在 iPhone 4 里同样以 640×960px 显示（但此时 CSS 里其实是用一半的数值来写的，很诡异）。
但这样怎么也没法在 iPhone 4 里画出 1px 的 border（按理说在 CSS 里写 0.5px 的话 iPhone 4 里应该就显示为 1px，但它显示为 0）。

稀里糊涂地把这些文件放到 GitHub 了，不知有谁能解决这个问题。
https://github.com/lianghai/v2type

感觉可能我用的整个尺寸表述的方式就错了。

iPhone

CSS

1px

13 条回复 • 1970-01-01 08:00:00 +08:00

dimlau

2010-11-23 00:54:58 +08:00

是不是四舍五入的问题？
没有手持设备的飘过……

lianghai

2010-11-23 01:24:18 +08:00

@dimlau 应该是 Safari 对数字直接取整的问题……但在 Retina display 上不应该是 1 CSS px = 2 device px 么……它应该在转换为 device px 再去取整啊……我是真不想用图片来做这种简单的边框……

Sai

2010-11-23 02:19:55 +08:00

应该是行不通的，Retina Screen下Webkit渲染这些线条会自动把1px按2px渲染

lianghai

2010-11-23 02:25:25 +08:00

@Sai 然后把 0.5px 按 0px 渲染……Webkit 的数学习惯真是悲情……

Livid

MOD

2010-11-23 02:26:33 +08:00

如果实在要追求这个效果，可以用 PNG……

Livid

MOD

2010-11-23 02:27:11 +08:00

实现方法参考 V2EX 的 retina logo。

lianghai

2010-11-23 02:36:34 +08:00

@Livid 过两天用 PNG 或者 SVG 试试玩。嗯，看到 V2EX 的实现了，用的是 @media。

不过这么一来不就是说 iPhone 4 的 Safari 里没法画奇数个 device px 的东西了，虽然关系不是那么大，但总觉得诡异——不知 iOS 4.2 里有没有变化，下载中，还剩 22 分钟～

diamondtin

2010-11-23 09:33:08 +08:00

retina display下的iDevice的device-pixel-ratio是2，也就是说1px会显示成2个设备像素宽。所以理论上来说在没有缩放（scale）的情况下，1px的点是4个像素。
这样，在不缩放时1px在iphone4和iphone3上显示的效果一致。
比较讨巧的是如何对于不同设备使用不同密度的图片。此时可以使用media query，-webkit-min-device-pixel-ratio: 2)来link不同的css。
如果想保证1px不被缩放，可以使用viewport的meta固定scale，V2EX就在使用“initial-scale=1.0; maximum-scale=1.0;”。

diamondtin

2010-11-23 09:36:11 +08:00

忘记说了，1pt是1个point。1point是1/72英尺，这个css unit一般用在印刷样式上面。
see: http://www.w3schools.com/css/css_units.asp

lianghai

2010-11-23 13:46:34 +08:00 via iPhone

@diamondtin 其实您说的应该是 1 pt = 1/72 inch 吧，“inch”其实是“英寸”。
另外如果您看一下我的代码就会知道我一直是在用 media query 来为 iPhone 4 指定 CSS 的...
我记得为了尝试一个别的效果而用过 viewport 的这个 scale 属性，不过没有出现 pixel-ratio=1 的效果，或许是我其他地方弄错了，晚上试试。多谢提醒〜

ilexswam

2010-11-23 14:51:34 +08:00

http://mudkip.me/ZZcO

似乎修改scale为0.5是可以的..

lianghai

2010-11-24 00:05:11 +08:00

@ilexswam 哇！这个思路好！而且这样就不用为桌面版本的全尺寸预览和 Retina 版维护两套 CSS 了，多谢。

lianghai

2010-11-24 03:00:45 +08:00

这篇文章也提到了 @ilexswam 说的这个有趣的方法：

http://amobil.se/2010/10/serving-high-dpi-images-to-iphone-4/