野外模糊和低分辨率的旅行，铬精

Question

当我使用Chrome进行开发后在Safari中测试我的网站时，我遇到了一个问题：所有文本和图像都是非常低分辨率的： Site here

我正在使用视网膜显示器，但所有图像的显示尺寸至少是其两倍，并且该网站在chrome中运行良好：

我可能不得不从头开始重做这个网站（可能认真地试图重新学习我所知道的一切），因为我发现它在firefox中看起来像什么。

但是下次如何避免这种情况？模糊的文字，即。 我应该包含一些CSS文本属性，以使所有平台上的文本呈现相同吗？

Answer 1

PNG图像肯定会更好地扩展，但您也可以尝试使用retina.js，它可以为具有视网膜显示的设备提供更高质量的图像（看起来您的主标题是一个可以解释模糊的图像，但我可以'加载它看看）。您是否考虑过使用Bootstrap CSS来确保跨浏览器兼容性？

看看这些：

http://getbootstrap.com/ - 关于Bootstrap

https://wrapbootstrap.com/themes/portfolios - 跨浏览器兼容布局的一些想法

它在Internet Explorer中根本不起作用，你可能也想看一下 - 我试图满足它由于市场份额（https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0），但使用Bootstrap或其他类似的包将修复并确保它在每个浏览器和每个设备上看起来都一样。