当前位置：文江博客话题详情

为什么 iOS 模拟器在适用于 Retina 的移动 Safari 中以较低的分辨率渲染我的图像？

发布于 2024-10-27 04:12:50 字数 360 浏览 1 评论 0原文

我正在尝试在带有 Retina 显示屏的移动 Safari 中测试我的 Web 应用程序，并且只能访问 iOS 模拟器。我的图像全部以 2 倍分辨率渲染。我意识到这在某种程度上可能是有意义的，但我实际上希望图像以其自然分辨率渲染。

如何让 img 标签在 iPhone 视网膜设备上的 Mobile Safari 中以其自然分辨率呈现？（模拟器或其他）

更新

我不是在编写本机应用程序并调用 Safari，我正在编写一个普通的网站，并且我希望 Safari 呈现我的 img针对视网膜和非视网膜设备以全分辨率标记图像。（我知道，会接受并希望图像在视网膜设备上会更小）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橘虞初梦 2024-11-03 04:12:50

您需要使用媒体查询。如果没有它，Retina 不会自动假设您使用的是 2x 资源；这将导致所有网站图形以其预期大小的 50% 呈现。灾难！

（来自 HTML5 样板）：

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

您还可以在此处使用ratio: 2 来仅针对 iPhone Retina，但某些设备（例如 Samsung Galaxy S）也具有相当高的分辨率 - 我认为是 220ppi - 尽管它们并不完全是两倍，所以请注意这一点。这些设备响应 1.5 查询。该比率来自实际像素占可见像素的数量。像素数学，耶！最终证明它们不是（也从来不是）绝对单位。

You need to make use of a media query. Retina won't automatically assume you are using 2x assets without it; that would cause all website graphics to render at 50% of their intended size. Disaster!

(from HTML5 boilerplate):

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

You can also use ratio: 2 here to target only iPhone Retina, but some devices, like Samsung Galaxy S, also have a pretty high res - 220ppi, i think - though they aren't exactly double, so watch out for that. These devices respond to the 1.5 query. The ratio comes from the amount of actual pixels that take up a visible pixel. Pixel math, yay! Finally proves they are not (and have never been) absolute units.

回复收藏 0 原文