iOS size of content in uiwebview for retina display

Question

Should I use high resolution images in UIWebView for retina display? Currently I'm using an HTML that is two times larger than screen size (the size of the HTML I'm displaying is 640px X 834px). Then I'm reducing the size using the zoom style:

body { zoom: 0.5 }

Is it correct way of creating HTML for retina display? Or should I create an HTM of normal size (320px X 417px)?

Answer 1

Let's say you're designing for iPhone 4 retina display, the wrapper can be 320x480. The trick is to provide a 2x higher resolution for images. (Fonts are unaffected).

For instance:

 .logo {
     background-size: 64px 64px;
     background-image:url("logo_retina.png");  // Actually a 128x128 image

 }

You can target retina devices with media queries to use different CSS per resolution:

 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />
 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="normalcss.css" />