View Full Version : How to disable Retina pixel doubling on mobile i-device (force 1-to-1 pixel ratio)?

2 Feb 2011, 8:33 AM
David Kaneda's blog post:

...mentions that i-devices with the 960x640 Retina display (iPhone and iPod 4) use pixel doubling by default to provide sharper text and buttons. This means that 1 CSS pt is drawn on the screen using a 2x2 pixel area. In effect, this reduces the resolution by half back to 480x320. I want to reclaim the extra pixels.

I'm developing a Sencha Touch app for my own use where I would prefer to have more screen real estate over clearer text when browsing on a mobile i-device. (I'd rather see more stuff small than less stuff clearly).

I want to disable the pixel doubling and automatic scaling so I can make full use of a 960x640 display. I understand the tradeoffs and I know this is possible because I've browsed other sites (e.g., Kotaku.com in classic view) where pixel doubling is not used.

What changes do I need to make to Sencha Touch to render to the native device resolution with no pixel doubling? I browsed the source to look for device/functionality detection and did not find an obvious place to make changes.

Any tips would be hugely appreciated. Thanks!

2 Feb 2011, 9:40 AM
I believe you can apply:

<meta name="viewport" content="width=640" />