Home Sign Up Sign In
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/
Style Guides
› Google Objective-C Style Guide
› NYTimes Objective-C Style Guide
Useful Tools and Services
› Charles Web Debugging Proxy
› Smore
Advertisement
lianghai
V2EX  ›  iDev

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

  •   
  •   lianghai · Nov 21, 2010 · 8003 views
    This topic created in 5676 days ago, the information mentioned may be changed or developed.
    今天稀里糊涂地看了一堆文章，还是没明白怎样在 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 replies  •  1970-01-01 08:00:00 +08:00
    dimlau
        1
    dimlau  
       Nov 23, 2010
    是不是四舍五入的问题？
    没有手持设备的飘过……
    lianghai
        2
    lianghai  
    OP
       Nov 23, 2010
    @dimlau 应该是 Safari 对数字直接取整的问题……但在 Retina display 上不应该是 1 CSS px = 2 device px 么……它应该在转换为 device px 再去取整啊……我是真不想用图片来做这种简单的边框……
    Sai
        3
    Sai  
       Nov 23, 2010
    应该是行不通的，Retina Screen下Webkit渲染这些线条会自动把1px按2px渲染
    lianghai
        4
    lianghai  
    OP
       Nov 23, 2010
    @Sai 然后把 0.5px 按 0px 渲染……Webkit 的数学习惯真是悲情……
    Livid
        5
    Livid  
    MOD
    PRO
       Nov 23, 2010
    如果实在要追求这个效果，可以用 PNG……
    Livid
        6
    Livid  
    MOD
    PRO
       Nov 23, 2010
    实现方法参考 V2EX 的 retina logo。
    lianghai
        7
    lianghai  
    OP
       Nov 23, 2010
    @Livid 过两天用 PNG 或者 SVG 试试玩。嗯，看到 V2EX 的实现了，用的是 @media。

    不过这么一来不就是说 iPhone 4 的 Safari 里没法画奇数个 device px 的东西了，虽然关系不是那么大，但总觉得诡异——不知 iOS 4.2 里有没有变化，下载中，还剩 22 分钟～
    diamondtin
        8
    diamondtin  
       Nov 23, 2010
    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
        9
    diamondtin  
       Nov 23, 2010
    忘记说了，1pt是1个point。1point是1/72英尺，这个css unit一般用在印刷样式上面。
    see: http://www.w3schools.com/css/css_units.asp
    lianghai
        10
    lianghai  
    OP
       Nov 23, 2010 via iPhone
    @diamondtin 其实您说的应该是 1 pt = 1/72 inch 吧，“inch”其实是“英寸”。
    另外如果您看一下我的代码就会知道我一直是在用 media query 来为 iPhone 4 指定 CSS 的...
    我记得为了尝试一个别的效果而用过 viewport 的这个 scale 属性，不过没有出现 pixel-ratio=1 的效果，或许是我其他地方弄错了，晚上试试。多谢提醒〜
    ilexswam
        11
    ilexswam  
       Nov 23, 2010
    http://mudkip.me/ZZcO

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

    http://amobil.se/2010/10/serving-high-dpi-images-to-iphone-4/
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2918 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 12:42 · PVG 20:42 · LAX 05:42 · JFK 08:42
    ♥ Do have faith in what you're doing.