用于视网膜显示的 uiwebview 中的 iOS 内容大小

【问题标题】：iOS size of content in uiwebview for retina display用于视网膜显示的 uiwebview 中的 iOS 内容大小
【发布时间】：2012-03-08 22:45:10
【问题描述】：

我应该在 UIWebView 中使用高分辨率图像进行视网膜显示吗？目前我使用的 HTML 是屏幕大小的两倍（我显示的 HTML 的大小是 640px X 834px）。然后我使用缩放样式减小尺寸：

body { zoom: 0.5 }

这是为视网膜显示创建 HTML 的正确方法吗？或者我应该创建一个正常大小的 HTM (320px X 417px)？

【问题讨论】：

标签： html ios uiwebview retina-display

【解决方案1】：

假设您正在为 iPhone 4 视网膜显示屏进行设计，包装器可以是 320x480。诀窍是为图像提供 2 倍的分辨率。（字体不受影响）。

例如：

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

 }

您可以使用媒体查询来定位 Retina 设备，以针对每个分辨率使用不同的 CSS：

 <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" />

【讨论】：