在视网膜显示器上以正确的比例显示网站答案

【问题标题】：Display website in correct ratio on retina display在视网膜显示器上以正确的比例显示网站
【发布时间】：2014-07-23 14:47:49
【问题描述】：

我目前正在使用 CSS @media 查询进行响应式设计，它适用于像素比为 1:1 的“旧”手机。

但高分辨率（视网膜）显示器使用 1:1 以外的比例来显示网站，因此网站看起来很小。

如何设置它应该使用的像素比例？

我试图用谷歌搜索它，但我只找到了如何为这些显示设置额外样式的方法。

【问题讨论】：

谷歌说css-tricks.com/snippets/css/retina-display-media-query
@JeremyCook 是的，我发现了，但这只是说明如何专门为视网膜制作样式，而不是如何使其使用不同的比例
你知道viewport meta tag吗？
顺便说一句，您的问题相当简单，因为您提供的上下文很少，而且看起来就像谷歌搜索一样简单。也许我最后的评论会让你克服困难。如果没有，那么 jsfiddle 可能会帮助其他人（比如我）帮助你。
@JeremyCook 哦，天哪！我知道有一个标签，但不记得是哪一个 :)，<meta name="viewport" content="width=device-width"> 解决了我的问题 :) 顺便说一句：有时问题和答案真的很简单 :)

【解决方案1】：

viewport meta tag 可用于固定浏览器的视口宽度以匹配设备的宽度。这解决了网站在高分辨率屏幕（如 Apple 的 Retina 显示器）上显示非常小的常见问题。

<meta name="viewport" content="width=device-width">

【讨论】：