在 mac 视网膜显示器上设计网站会导致尺寸问题

Question

还有人有这个问题吗？我在使用视网膜显示屏的 Mac 上设计了一个响应式网站布局，它看起来棒极了。我承认我的显示设置使用了尺寸更小的视网膜选项之一。当我去向客户炫耀设计时，他们可能有一台个人电脑笔记本电脑或一台较旧的非视网膜 macbook，对他们来说一切看起来都是巨大的。

有什么技巧可以使我所缺少的体验更加一致吗？

谢谢！

Answer 1

一些让您入门的想法。

如果您遇到的问题是内联图像，那么 retina.js 是一个简单的解决方案。您将图像的常规版本和高分辨率版本保存到您的站点，此 JS 将为具有视网膜显示器的访问者提供高分辨率版本。

如果你想通过 CSS 管理图像（比如背景），这个媒体查询就可以了：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* CSS for retina displays here */
}

祝你好运！

Answer 2

我有这样一种情况，网站的页面尺寸缩小了，这让用户很难阅读内容。这个问题只发生在某人的 Mac 上。 Windows PC 看起来很棒。它与图像无关。

我在其他网站上看到一些评论谈论 Retina 和非 Retina，但我不知道那是什么意思。