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

我的问题主要是页面重新加载，而不是视网膜检测。我在视网膜显示的head tag中使用以下代码：

<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>

if（document.cookie.indexOf（'device\u pixel\u ratio'）=-1
&&窗口中的“devicePixelRatio”
&&window.devicePixelRatio==2）{
变量日期=新日期（）；
date.setTime（date.getTime（）+3600000000）；
document.cookie='device\u pixel\u ratio='+window.devicePixelRatio；
//如果Cookie未被阻止，请重新加载页面
if（document.cookie.indexOf（'device\u pixel\u ratio'）！=-1）{
window.location.reload（true）；
}
}

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

重载函数不会停止页面呈现。因此，您在第一次访问时会看到未设置样式的页面（半加载），然后刷新。之后，由于存储了cookie，所以站点其余部分的一切都很好

很明显，PHP没有提供检测屏幕类型的函数。它必须通过JS完成。但是JS没有合适的工具来在不加载页面的情况下重新加载/重定向，甚至代码也在head中使用

简言之，我被夹在两者之间。我希望有人会建议在第一次加载时不显示任何内容就重新加载（它甚至显示我放在头部的内联样式）。或者在第一次加载时显示标准图像，并允许视网膜进行其余的浏览体验是最佳选择

顺便说一下，我尝试了重新加载（true）和重新加载（false）。这没用

---

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

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

我决定使用SVG上传支持的1.5倍单图像大小。虽然这不是所有方面的100%最佳答案，但比失去可靠性要好得多

---

*我是一名Wordpress开发人员，我参考了WP Super Cache和类似的缓存方法，但请注意，其他缓存方法也可能存在此问题。

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

这可以使用外部JS文件来完成。当浏览器找到外部文件时，它将等待该文件运行。另一方面，如果您有一个内联

标记，那么浏览器将不会等待

---

实际上，建议永远不要阻止页面呈现，以缩短页面加载时间，但为此目的，这是必要的。有关更多信息，您可以参考

而不是使用纯JS解决方案，通常更好的做法是使用CSS进行样式设置，使用本地HTML元素进行内容图像，如果需要，使用不引人注目的JavaScript。不引人注目的JavaScript意味着即使禁用了JS，网页也能正常工作

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

对于HTML中的响应图像，有标准元素，但它还没有得到广泛支持，因此可以使用类似polyfill的元素

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

• 始终使用高分辨率图像（不考虑实际像素密度；会在一定程度上浪费流量，并为低像素密度显示器的用户提供较低的图像质量）

• 或者在页面加载时使用JavaScript将低分辨率图像替换为高分辨率图像。为了防止在高分辨率版本之前加载低分辨率版本，可以将低分辨率版本放入

  NOSCRIPT

  元素中，然后动态读取内容，提取、修改图像源，并通过JS将

  NOSCRIPT

  元素替换为hires图像

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

---

也可以考虑SVG格式的矢量图像，在不考虑质量损失的情况下，不管实际像素密度如何；尽管如此，在具有常规像素密度的显示器上（例如，与4K显示器相比，流行的全高清显示器），它们的视觉质量可能明显低于像素完美的1:1光栅图像。

您将此脚本块放置在何处？将此脚本移到外部JS文件中。它会起作用的。哇，好主意！你能把这个作为回复贴出来吗？这样我就可以接受你的回答了。谢谢我把标题改了一点，我想那会有帮助的。再次感谢您的建议和帮助。没问题，现在可以了。不过有一个问题。页面加载时间问题只影响客户端，而不影响谷歌或其他机器人，我想？否则这个解决方案（我的意思是重新加载）可能会在搜索引擎上造成混乱，对吗？我不认为谷歌会注意脚本块，但我不确定。我认为Google只查看原始HTML，不解析任何javascript，但我也不确定。如果你愿意的话，你可以问另外一个问题。@merta因为谷歌确实执行Javascript，但我不知道它如何处理Javascript重定向。避免Googlebot搞砸的一个潜在解决方案是将这个脚本文件添加到robots.txt中，这样Google就不会访问它。显然，我应该研究一下。再次感谢您的关注。从那以后，我就再也没有在问题中提到过