首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
iOS 开发实用书单
iPhone App Development: The Missing Manual
Cocoa and Objective-C: Up and Running
Cocoa Programming for Mac OS X
深入浅出设计模式 Head First Design Patterns
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
V2EX  ›  iDev

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

  •  
  •   lianghai · 2010-11-21 21:19:14 +08:00 · 6070 次点击
    这是一个创建于 3254 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天稀里糊涂地看了一堆文章,还是没明白怎样在 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

    感觉可能我用的整个尺寸表述的方式就错了。
    13 回复  |  直到 1970-01-01 08:00:00 +08:00
        1
    dimlau   2010-11-23 00:54:58 +08:00
    是不是四舍五入的问题?
    没有手持设备的飘过……
        2
    lianghai   2010-11-23 01:24:18 +08:00
    @dimlau 应该是 Safari 对数字直接取整的问题……但在 Retina display 上不应该是 1 CSS px = 2 device px 么……它应该在转换为 device px 再去取整啊……我是真不想用图片来做这种简单的边框……
        3
    Sai   2010-11-23 02:19:55 +08:00
    应该是行不通的,Retina Screen下Webkit渲染这些线条会自动把1px按2px渲染
        4
    lianghai   2010-11-23 02:25:25 +08:00
    @Sai 然后把 0.5px 按 0px 渲染……Webkit 的数学习惯真是悲情……
        5
    Livid   V2EX Moderator   2010-11-23 02:26:33 +08:00
    如果实在要追求这个效果,可以用 PNG……
        6
    Livid   V2EX Moderator   2010-11-23 02:27:11 +08:00
    实现方法参考 V2EX 的 retina logo。
        7
    lianghai   2010-11-23 02:36:34 +08:00
    @Livid 过两天用 PNG 或者 SVG 试试玩。嗯,看到 V2EX 的实现了,用的是 @media

    不过这么一来不就是说 iPhone 4 的 Safari 里没法画奇数个 device px 的东西了,虽然关系不是那么大,但总觉得诡异——不知 iOS 4.2 里有没有变化,下载中,还剩 22 分钟~
        8
    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;”。
        9
    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
        10
    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 的效果,或许是我其他地方弄错了,晚上试试。多谢提醒〜
        11
    ilexswam   2010-11-23 14:51:34 +08:00
    http://mudkip.me/ZZcO

    似乎修改scale为0.5是可以的..
        12
    lianghai   2010-11-24 00:05:11 +08:00
    @ilexswam 哇!这个思路好!而且这样就不用为桌面版本的全尺寸预览和 Retina 版维护两套 CSS 了,多谢。
        13
    lianghai   2010-11-24 03:00:45 +08:00
    这篇文章也提到了 @ilexswam 说的这个有趣的方法:

    http://amobil.se/2010/10/serving-high-dpi-images-to-iphone-4/
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2244 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 13:23 · PVG 21:23 · LAX 06:23 · JFK 09:23
    ♥ Do have faith in what you're doing.