4 ms·

On the iPhone 1px means 2px? Where was the rage? If Microsoft had done this, everybody would scream about distorted web standards.

by beza1e1 15y ago

WiseWeasel 15y ago
The alternative would mean everything spec'd in pixels would look tiny on retina display devices. It's better to have a few sub-optimal border radius curves than to break the web completely. Personally, I think his "wrong" 2x example looks much better than the "fixed" one. The top inner border highlight is practically invisible on the latter, and the border around the button is fairly hard to see.
wmf 15y ago
1px means 2 pixels on "retina" displays (iPhone 4). On some recent Android phones 1px = 1.5 pixels. CSS1 says "Pixel units are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values." http://www.w3.org/TR/2008/REC-CSS1-20080411/#length-units http://www.w3.org/TR/2008/REC-CSS1-20080411/#length-units Apple's explanation of their implementation: http://www.webkit.org/blog/55/high-dpi-web-sites/ http://www.webkit.org/blog/55/high-dpi-web-sites/ There was intense discussion at the time, but ultimately this rule exists for a reason and is beneficial in virtually all situations.
yonran 15y ago
Some terminology that you didn't need to know in 2005: "device pixel": what the screen reports is a pixel. Usually it's a square containing red, green, and blue, but not if you use a PenTile display. "CSS pixel" is what widths and clientX are measured in. Interestingly, the CSS spec has always defined a CSS pixel relative to the angle you'd get if you read it, but browsers always treated them as device pixels until they implemented full page zoom. (aka logical pixel in IE8) "screen pixel" (system pixel in IE8) is the unit in which window.screenX is measured. It's what CSS pixel would be at 100% zoom. Mozilla is trying to end the insanity by removing this different measure. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_n...

On the iPhone 1px means 2px? Where was the rage? If Microsoft had done this, everybody would scream about distorted web standards.

by beza1e1 15y ago

On the iPhone 1px means 2px? Where was the rage? If Microsoft had done this, everybody would scream about distorted web standards.

WiseWeasel 15y ago

The alternative would mean everything spec'd in pixels would look tiny on retina display devices. It's better to have a few sub-optimal border radius curves than to break the web completely. Personally, I think his "wrong" 2x example looks much better than the "fixed" one. The top inner border highlight is practically invisible on the latter, and the border around the button is fairly hard to see.

wmf 15y ago

1px means 2 pixels on "retina" displays (iPhone 4). On some recent Android phones 1px = 1.5 pixels. CSS1 says "Pixel units are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values." http://www.w3.org/TR/2008/REC-CSS1-20080411/#length-units http://www.w3.org/TR/2008/REC-CSS1-20080411/#length-units Apple's explanation of their implementation: http://www.webkit.org/blog/55/high-dpi-web-sites/ http://www.webkit.org/blog/55/high-dpi-web-sites/ There was intense discussion at the time, but ultimately this rule exists for a reason and is beneficial in virtually all situations.

yonran 15y ago

Some terminology that you didn't need to know in 2005: "device pixel": what the screen reports is a pixel. Usually it's a square containing red, green, and blue, but not if you use a PenTile display. "CSS pixel" is what widths and clientX are measured in. Interestingly, the CSS spec has always defined a CSS pixel relative to the angle you'd get if you read it, but browsers always treated them as device pixels until they implemented full page zoom. (aka logical pixel in IE8) "screen pixel" (system pixel in IE8) is the unit in which window.screenX is measured. It's what CSS pixel would be at 100% zoom. Mozilla is trying to end the insanity by removing this different measure. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_n...