我正专门为Retina显示器开发一个iPad网络应用程序。
所以我想知道提供适合Retina Display的HTML内容的正确方法是什么。
因为如果我使用这个元标记
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
页面比iPad屏幕大，似乎忽略了我的身体宽度为2048px的事实。
这是兼容性吗？
设置initial-scale=0.5似乎解决了这个问题，因为屏幕适合身体。
但我不确定这是否是服务Retina显示器的正确方法。
有人可以帮助我吗？
答案 0 :(得分：2)
Retina显示器通过在每个维度中具有两倍于“逻辑像素”的“硬件/实际像素”来工作。也就是说，就浏览器而言，你仍然可以渲染到1024x768的显示器（或者屏幕减去铬的大小）。
您应该为该标准尺寸设置布局，并使用initial-scale = 1 - 然后视网膜和标准分辨率显示都将尽可能地呈现内容。
额外信息，基于约翰内斯的评论：
如果你有'原始分辨率'.PSD（2048x1536px）变成布局，我就是这样做的：
找出你需要的基于图像的资产：像纹理，花哨的图标，用CSS无法完成的图像（你可以而且应该使用CSS作为渐变，阴影，透明胶片等） 。使用指南/切片标记这些内容，以便您可以方便地将它们提取到自己的文件中。
复制文档并将其缩放到50％：这是可用于进行测量的“逻辑像素”文档。如果你需要回答'标题有多高？'或者“菜单中文本的大小是多少？”，这是要使用的文档。
从原始文档和50％缩放文档中提取图像资源。使用'@ 2x'后缀命名原始比例资产（因此您有body_background.png和body_background@2x.png）。
将html页面设置为使用initial-scale = 1，将尺寸设置为50％/逻辑像素测量值。所以 - 你的整体页面宽度应该是1024px，而不是2048px。
根据逻辑像素尺寸对CSS进行编码。根据需要参考50％比例文档中的正常分辨率资产。
在CSS中使用媒体查询 - 查询设备像素比 - 根据需要切换高分辨率资源。
这将为您提供视网膜设备上的高分辨率视网膜显示，以及其他设备上的标准分辨率显示。通过以双倍大小创建所有内容并将其缩小，您将不会获得任何明显的质量提升 - 当然不足以保证始终以双倍尺寸工作。
其他人可能有更好的资产创建工作流程 - 我没有做很多PSD - ＆gt;目前布局工作，但这对我来说足够好。