基于媒体查询/视口或“Retina”修复的 JavaScript 中的 Else 语句答案

【问题标题】：Else statement in JavaScript based upon media query / viewport OR 'Retina'-fix基于媒体查询/视口或“Retina”修复的 JavaScript 中的 Else 语句
【发布时间】：2013-12-23 02:05:07
【问题描述】：

我正在为摄影师创建一个网站。可悲的是，为了保持质量，图片服务至少应该等于用户的视口。因此，在新的 Macbook Pros 等 Retina 设备上，应该有大约 1800x2880 像素的图像。太糟糕了，这些加载速度很慢。

我目前有一个动态脚本，点击时只需加载拇指和完整图片。

HTML 代码，用于拇指（点击后立即显示完整大小）：

<a  href="#"
    data-flare-title="All-my-Loving"
    data-flare-width="375"
    class="multiple color"></a>

以及自动链接拇指 src、A href 和更多标签的 Javascript：

$(function(){

$('#container #portfolioOverview a').each(function(){

var $link = $(this),
    title = $link.data('flare-title') + '.jpg';
    imgTooltip = $link.data('flare-title');
    imgTip = imgTooltip.replace(/-/g, ' ');
    imgWidth = $link.data('flare-width') + 'px';

$link.attr('href', 'images/portfolio/full/' + title);
$link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
$link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);
$link.attr('data-flare-scale', 'fitmax');
$link.attr('data-target', 'flare');
$link.attr('data-flare-gallery', 'portfolio');
$link.addClass('tip');

$link.attr('data-tip', imgTip);

$link.append($('<img>', {
  src     : 'images/portfolio/thumbs/' + title,
  height  : '250px',
  width   : imgWidth
}));

});

});

这一行：$link.attr('href', 'images/portfolio/full/' + title); 将正确的完整图片链接到拇指。但是，所有这些完整图像的分辨率约为 2800x1800 像素。这些也会加载到分辨率为 1024x768 的屏幕上，这会导致较小屏幕的加载时间过慢且不必要

需要解决方案：
据我所知，这可能只是 Retina JS 脚本 或 Else 语句。

由于 Retina JS 脚本会自动选择 /images/portfolio/full/ 文件夹中的“*@2x.jpg”图像，对于非 Retina 设备将忽略它们，而 ELSE 语句将检查视口是否更大大于 1920x1080。如果确认：从文件夹“images/portfolio/2x”而不是“full”提供图像，而“else”将从默认的完整文件夹提供。

如果我不清楚，请发表评论。提前致谢！

注意：这应该适用于屏幕分辨率高于 1920x1080 的所有设备，而不仅仅是 Apple 的设备

【问题讨论】：

var retina = window.devicePixelRatio > 1; - 如果设备启用了视网膜，retina 将为true，否则为false。
@ahren 这如何适用于三星和其他具有 2560x1440 及以上显示器的品牌？

标签： javascript jquery retina.js

【解决方案1】：

为什么您不使用任何响应式图像技术方法？更多信息可以在 http://responsiveimages.org/ 上找到

另一种方法是通过增加图像的尺寸来最小化图像质量。听起来很奇怪，但它确实有效：http://www.netvlies.nl/blog/design-interactie/retina-revolution 我有时使用这种技术，结果图像即使在视网膜显示器上也很清晰。

【讨论】：

我知道@Netvlies 写的博文，然而.. 即使在阅读了两遍之后，在过去的一个月里，我还是不太了解它。我想我应该再看看它。其他两个我会看看。不认识他们。谢谢！ - 用新的解决方案再次评论或回答。如果这能解决我的问题，你知道我会点击哪个按钮 :) 谢谢！

【解决方案2】：

您可以在此处找到问题的解决方案。我不会复制和粘贴解决方案。基本思想是使用自定义属性在视网膜等高分辨率显示器上提供高分辨率图像。

http://drew.roon.io/retina-images-that-respond

【讨论】：

看起来很有趣 - 虽然我可能错了，但这不正是 Retina.JS 所做的吗？
我不知道retina.js。看起来很有趣。