似乎在 Retina 显示器上我们需要提供 2x 图像，然后将尺寸指定为半宽和半高。这有点烦人，因为您必须 A) 查找图像的尺寸，然后 B) 手动输入宽度和高度的 50%，这样它就不会显示为双倍大小。
我可以提供分辨率两倍的图像，但是否有更快捷的方法来指定图像实际显示的尺寸？
最佳答案
您基本上需要在 <head> 中设置一些内容(在其他任何事情之前)写入一个 cookie，该 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>
或在别处解释。
来源:
关于css - 是否可以在视网膜显示器上自动提供正确尺寸的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24442661/