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

Question

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

body { zoom: 0.5 }

这是为 Retina 显示器创建 HTML 的正确方法吗？还是应该创建一个正常大小 (320px X 417px) 的 HTM？

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