Take the 2-minute tour ×
Ask Different is a question and answer site for power users of Apple hardware and software. It's 100% free, no registration required.

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?

share|improve this question
add comment

migrated from superuser.com May 4 '12 at 20:43

This question came from our site for computer enthusiasts and power users.

3 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
This is correct, retina iOS devices use a point system to handle on screen item sizing and placement. –  0x7fffffff May 5 '12 at 10:15
add comment

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.)

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.