Question

似乎在Retina显示屏上我们需要提供2x图像，然后将尺寸指定为半宽和半高。这有点烦人，因为你必须A）查看图像的尺寸，然后B）手动输入宽度和高度的50％数量，这样它就不会显示为双倍尺寸。

我可以很好地提供两倍于分辨率的图像，但有更简单的方法来指定它们实际显示的尺寸吗？

Answer 1

你基本上需要在你的<head>（在其他任何事情之前）设置一些内容，这些内容会编写一个cookie，并将所有请求发送到服务器。

这样的事情：

if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1) document.cookie='HTTP_IS_RETINA=1;path=/';

然后您需要在服务器中读取该cookie并决定是否提供常规或视网膜图像。

您可以使用mod rewrite（.htaccess）

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine on
    RewriteCond %{HTTP_COOKIE} HTTP_IS_RETINA [NC]
    RewriteCond %{REQUEST_FILENAME} !@2x
    RewriteRule ^(.*)\.(gif|jpg|png)$ $1@2x.$2
    # if @2x isn't available fulfill the original request
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)@2x\.(gif|jpg|png)$ $1.$2
</IfModule>

或在别处解释。

来源：

是否可以在视网膜显示器上自动提供正确的尺寸图像？

1 个答案: