在本地 UIWebView 中使用 Retina 图像
由于某种原因，我无法让 UIWebView 与我的新 Retina 图像“很好地配合”。问题，一步一步：
我正在从捆绑包中加载一系列 HTML 帮助文件。如果是 iPhone 4，我的代码会加载不同的 HTML 文件（下面的 LWERetinaUtils 是我编写的 util 类）。我已阅读在这个问题中，UIWebView 不可能自动- 检测@2x 指标 - 并亲自经历过，因此采用了这种方法。
if ([LWERetinaUtils isRetinaDisplay])
htmls = [NSArray arrayWithObjects:@"[email protected]",@"[email protected]",nil];
else
htmls = [NSArray arrayWithObjects:@"foo.html",@"bar.html",nil];
[email protected] 和 foo.html 的区别是图像标签引用更高分辨率的图像。
然后，我像这样加载 UIWebView：
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 375.0f)];
_webView.delegate = self;
[self _loadPageWithBundleFilename:self.filename];
[self.view addSubview:_webView];
_loadPageWithBundleFilename: 只是我编写的一个辅助方法，用于告诉 UIWebView 从文件加载内容。
到目前为止一切顺利，我的内容在 iPhone Simulator 和 iPhone 4 Simulator 之间的加载方式有所不同 - 与我预期的不同。
文本显示的大小完全相同 - 但视网膜图像似乎被放大（它们看起来像素化），并且它们飞出了屏幕的右端。
我尝试了：
_webView.scalesPageToFit = YES
属性，果然，它使图像正确显示（至少没有像素化）。但是，然后我的文字很小（因为我被网络视图缩小了很多）。
有谁知道如何解决此类问题？我见过一些Javascript解决方案（像这样），但它们似乎只是“图像交换”，这就是我上面已经做过的 - 所以它应该可以工作，不是吗？
最后，在 HTML 文件中，这是我引用图像的方式：
<img src="[email protected]" border="0" title="Welcome!" class="title"/>
和 CSS：
body{ margin:20pt; padding:10pt; line-height:38pt; font-size:24pt; text-align:left; background-color: transparent; font-family:Helvetica,sanserif; width:640pt;}
我将宽度标签放在 CSS 中 - 它似乎没有改变任何内容。
For some reason, I cannot get a UIWebView to "play nice" with my new Retina images. The issue, step-by-step:
I am loading a series of HTML help files out of the bundle. My code loads different HTML files if it's an iPhone 4 (LWERetinaUtils below is a util class I have written). I have read in this question that it is not possible for the UIWebView to auto-detect the @2x indicator - and experienced that personally, hence this approach.
if ([LWERetinaUtils isRetinaDisplay])
htmls = [NSArray arrayWithObjects:@"[email protected]",@"[email protected]",nil];
else
htmls = [NSArray arrayWithObjects:@"foo.html",@"bar.html",nil];
The only difference between the contents of [email protected] and foo.html is that the image tags refer to higher-resolution images.
Then, I load my UIWebView like this:
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 375.0f)];
_webView.delegate = self;
[self _loadPageWithBundleFilename:self.filename];
[self.view addSubview:_webView];
_loadPageWithBundleFilename: is just a helper method I wrote to tell the UIWebView to load the content from the file.
So far so good, my content is loading differently between iPhone Simulator and iPhone 4 Simulator - and not how I'd expect.
The text shows up exactly the same size - but the Retina images appear to be scaled up (they look pixelated), and they fly off the right end of the screen.
I tried the:
_webView.scalesPageToFit = YES
property, and sure enough, it made the images appear appropriately (at least not pixelated). But, then my text was tiny (as I was pretty far zoomed out by the web view).
Does anyone know how to get around this kind of issue? I have seen a few Javascript solutions (like this), but they seem to just be "image swapping", which is what I have already done above - so it should work, no??
Finally, in the HTML files, here is the way I am referring to the images:
<img src="[email protected]" border="0" title="Welcome!" class="title"/>
And the CSS:
body{ margin:20pt; padding:10pt; line-height:38pt; font-size:24pt; text-align:left; background-color: transparent; font-family:Helvetica,sanserif; width:640pt;}
I put the width tag in the CSS - it doesn't seem to change anything.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
确保您在![]()
上指定了高度和宽度。标签。您当然至少需要宽度才能完成这项工作。
Make sure you are specifying height and width on your <img> tags. You certainly need at least width to make this work.
如果您不关心让 WebKit 处理在数量不断减少的非视网膜设备上调整图像大小（缩小），您可以这样做：
If you don't care about letting WebKit handle resizing (shrinking) the images on the declining population of non-retina devices, you can just do this: