1

The iPad 3 is a big step forward in screen resolution from earlier models, which is good.

However, I'm curious about how this interacts with webpages that specify the size of elements in pixels. If it took such instructions literally, presumably you would need a magnifying glass to read the results (or more practically, to use the zoom function on every page).

Does the iPad web browser take this into account and multiply specified sizes by some reasonable conversion factor to end up with element sizes that work well on the high-resolution screen?

Improve this question

3 Answers 3

Reset to default
1

According to Quirksmode, a "pixel" is "essentially an abstract construct created specifically for us web developers". In other words, yes - the iPad web browser, and other browsers (and other applications!) in the same situation handle this smoothly. You can read more about this in the QuirksBlog post.

Improve this answer
1
  • This is correct, retina iOS devices use a point system to handle on screen item sizing and placement.
    – Mick MacCallum
    Commented May 5, 2012 at 10:15
1

Consider that in portrait, the original iPad is only 768 pixels across. This is too narrow for many/most web page layouts. So instead, it renders the page as if it was 980 pixels across. Then it downsizes that to fit the actual screen pixel, shrinking graphics. It also fiddles with the text so that it is clear, rendering it directly (instead of rasterizing and then shrinking, which would make it fuzzy).

With a Retina display, it still acts as if it is 980 across, but now it upsizes everything. Text is now very sharp. With image elements, if the graphic actually has more resolution than the declared size, it will be shown at the best possible resolution. (For example, the element is IMG WIDTH="980", but that particular graphic is 1536 pixels across. It's a "full-width" graphic, so you'd see every pixel one-for-one, even though it's "only" 980 pixels in size.)

Improve this answer
0

It can be problematic, but Safari does attempt to scale the page ... Think of when you double tap a block of text, and you are "zoomed in" to larger text. Still, things can render in crazy ways. It helps a lot to think about the viewport size rather than screen resolution ... And viewport/alignment/scale relationships. Of particular value in controlling the experience is setting the viewport meta tag in page headers thoughtfully.

Good question -- with iPad ownership exploding (19% of US households a few months back, and total purchased going into the hundreds of millions, tablet rendering can't be ignored. It isn't enough to detect the browser agent and forward people to the "mobile" site that is optimized for smartphones.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .