Question

我的问题几乎是关于页面重新加载而不是视网膜检测。我在head标签中使用以下代码进行视网膜显示：

<script type="text/javascript">
               if( document.cookie.indexOf('device_pixel_ratio') == -1
                  && 'devicePixelRatio' in window
                  && window.devicePixelRatio == 2 ){

                var date = new Date();
                date.setTime( date.getTime() + 3600000000 );

                document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio;
                //if cookies are not blocked, reload the page
                if(document.cookie.indexOf('device_pixel_ratio') != -1) {
                    window.location.reload(true);
                }
              }
</script>

它正在检测访问者的屏幕类型，然后存储cookie并重新加载（如果它是视网膜显示）。它除了一个之外没有任何问题。

重新加载功能不会停止页面渲染。因此，您会在第一次访问（半载）时看到无样式页面，然后刷新。之后，由于存储了cookie，因此网站其余部分的一切正常。

很明显，PHP没有提供检测屏幕类型的功能。必须通过JS完成。但JS没有正确的工具来重新加载/重定向而不加载页面，即使代码正在头部使用。

简而言之，我陷入了困境之间。我希望有人可能有重新加载的建议，而不会在第一次加载时显示任何内容（它甚至显示我放入的内联样式）。或者在第一次加载时显示标准图像并为其余的浏览体验提供视网膜是最佳选择吗？

顺便说一下，我尝试了重载（true）和重载（false）。它没有帮助。

更新：请参阅下面的Marat Tanalin的答案，了解可能的解决方法和更好的视网膜/高清显示图像使用解决方案，而不是存储cookie +重新加载。

在我深入研究之后，我意识到由于*缓存方法，生成视网膜和标准图像可能不是所有时间的答案。换句话说，由于低质量图像（和脚本）已经被高速缓存，因此在第一次访问时向访问者显示低质量图像并在刷新后显示高质量图像可能不起作用。

我决定使用支持SVG上传的1.5倍单图像尺寸。虽然在各个方面都不是100％最佳答案，但更好的选择就是失去可靠性。

*我是一名Wordpress开发人员，我参考WP超级缓存和类似的缓存方法，但要注意它也可能是其他缓存方法的问题。

Answer 1

基本上，您希望在运行此脚本之前停止呈现页面。

这可以使用外部JS文件来完成。当浏览器找到外部文件时，它将等待直到运行。另一方面，如果您有内联<script>标记，则浏览器不会等待。

实际上，建议从不阻止页面呈现，以改善页面加载时间，但为此目的，这是必要的。有关详细信息，请参阅https://developers.google.com/speed/docs/insights/BlockingJS

Answer 2

除了使用纯JS解决方案之外，通常更好的做法是使用CSS进行样式化，使用内容HTML元素进行内容映像，以及根据需要使用不显眼的JavaScript。不引人注目的JavaScript意味着即使JS被禁用，网页也能正常工作。

在CSS中，只需使用媒体查询。

对于HTML中的自适应图像，有标准的PICTURE元素，但它尚未得到广泛支持，因此可以使用像picturefill这样的填充。

响应式图像的另一种可能方法：

始终使用高分辨率图像（无论实际像素密度如何;有些会浪费流量并为像素密度较低的显示器用户提供较低的图像质量）;
或使用JavaScript在页面加载时使用高分辨率版本替换低分辨率图像。为了防止在高分辨率版本之前加载低分辨率版本，可以将低分辨率版本放入NOSCRIPT元素中，然后动态读取内容并提取，修改图像源，NOSCRIPT元素为通过JS替换为招聘图片。

对于摄影图像，可接受的折衷可能是使用1.5x图像。但要注意线条图像（如徽标或方案）：它们通常以1：1比例看起来最佳（当一个图像像素完全对应于一个物理显示像素时），并且在模糊缩放时可能会出现明显的质量损失。

另外，考虑尽可能使用SVG格式的矢量图像 - 无论实际像素密度如何，它们都可以在没有质量损失的情况下进行缩放但是，在具有常规像素密度的显示器上（例如，流行的全高清显示器与4K显示器相比），与像素完美的1：1光栅图像相比，它们的视觉质量可能会明显降低。

在重新加载期间，Javascript Retina / HD显示检测和阻止页面呈现

2 个答案: