为iPad视网膜显示提供HTML的正确方法

我正在开发一款专门用于视网膜显示的iPad web应用程序

所以我想知道什么是适合视网膜显示的HTML内容的正确服务方式

因为如果我使用这个元标记

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">

这个页面比iPad屏幕大得多，似乎忽略了我的身体宽度为2048px的事实

这是一种兼容性问题吗

设置

初始刻度=0.5

似乎可以解决此问题，因为屏幕适合身体

但我不确定这是否是为视网膜显示服务的正确方式

---

有人能帮我一下吗？

视网膜显示器的工作原理是每个维度的“硬件/实际像素”是“逻辑像素”的两倍。也就是说，就浏览器而言，您仍在渲染到1024x768（或任何屏幕减去chrome大小）的显示

你应该为标准尺寸设置布局，并使用初始比例=1-然后视网膜和标准分辨率显示器将尽可能地呈现内容

额外信息，基于Johannes的以下评论：

如果要将“本机分辨率”.PSD（2048x1536px）转换为布局，我会这样做：

• 确定您需要哪些基于图像的资源：纹理、奇特的图标、无法使用CSS的图像（您可以并且应该使用CSS处理渐变、阴影、透明胶片等）。用辅助线/切片标记这些文件，以便方便地将它们提取到自己的文件中

• 复制文档并将其缩放到50%：这是“逻辑像素”文档，可用于测量。如果您需要回答“标题有多高？”或“菜单中文本的大小是多少？”这是要使用的文档

• 从原始文档和50%缩放文档中提取图像资产。使用“@2x”后缀命名原始缩放资源（因此您有body_background.png和body_background@2x.png)

• 将html页面设置为使用初始比例=1，并将尺寸设置为50%/逻辑像素。所以-你的页面总宽度应该是1024px，而不是2048px

• 根据逻辑像素尺寸对CSS进行编码。根据需要参考50%比例文件中的正常处置资产

• 在CSS中使用媒体查询-查询设备像素比率-根据需要切换高分辨率资产

这将在视网膜设备上为您提供高分辨率的视网膜显示，并在其他设备上提供正常的分辨率显示。你不会得到任何显着的质量提高，创造一切在两倍大小和缩小它-当然不足以保证工作在双维所有的时间

---

其他人可能有更好的资产创建工作流程-我目前没有做太多PSD->布局工作，但这对我来说已经足够好了。

因此不可能对html页面进行布局，使其实际使用硬件像素与逻辑像素的比值为1？您无法直接控制硬件像素，不-我很确定这不仅仅是一个Safari游戏：原生应用程序也可以使用逻辑像素，并提供2倍比例的图像资源，等等。我相信，你创建2倍比例布局并将其缩小的方法是你能得到的最接近的方法，但除非你想制作非常微小的文本或元素，否则我认为不会有太大的区别。你到底想干什么？你能给我一张截图吗？没什么特别的。但客户给我们发送的PSD表示逻辑像素，因此他使用2048px宽度的空间。我认为创建2倍的比例，然后缩小它似乎是最好的。啊-好吧，这更有意义-我将添加到我的答案中。实际上，它是4倍的像素，而不是2倍的像素，因为它是2倍的水平和2倍的垂直。