Javascript 将js与媒体查询相结合（与视口相关）

最近，一位客户要求我使用一个js代码段根据分辨率更改元视口标记的宽度。他们表示，这可能会提高该网站手机/平板电脑版的性能。但我不敢相信，因为在我看来，它与viewport tags width=device width有些相同，我会说更糟

以下是代码片段：

    function setviewport(){
         if(window.innerHeight > window.innerWidth){
              if(screen.height > screen.width){
                   deviceWidth = screen.width;
              }else{
                   deviceWidth = screen.height;
              }
         }else{
              if(screen.height > screen.width){
                   deviceWidth = screen.height;
              }else{
                   deviceWidth = screen.width;
              }
         }

         if(deviceWidth<=512){
              $("#viewport").attr("content","width=480,initial-scale="+deviceWidth/480);
         }else if(deviceWidth>=960){ 
              $("#viewport").attr("content","width=1024");
         }else{
              $("#viewport").attr("content","width=768,initial-scale="+deviceWidth/768);
         }
    }

函数setviewport（）{
如果（window.innerHeight>window.innerWidth）{
如果（屏幕高度>屏幕宽度）{
deviceWidth=屏幕宽度；
}否则{
设备宽度=屏幕高度；
}
}否则{
如果（屏幕高度>屏幕宽度）{
设备宽度=屏幕高度；
}否则{
deviceWidth=屏幕宽度；
}
}
如果（deviceWidth=960）{
$（“#视口”）.attr（“内容”，“宽度=1024”）；
}否则{
$（“#视口”）.attr（“内容”，“宽度=768，初始比例=”+deviceWidth/768）；
}
}

---

也许我什么都不懂，这确实是一个更好的选择，宽度=设备宽度。如果是，你能解释一下原因吗？它能提高性能吗？提前感谢。

您的客户似乎担心通过javascript而不是css媒体查询来创建响应性web设计的性能提高

这可归因于人们普遍存在的一个神话：

浏览器必须等到下载、解析并应用相关的 CSS，然后才能在屏幕上呈现页面

不尊重这一点可能会导致“未定型内容的闪现”（FOUC），这将创造糟糕的用户体验。另一方面，Javascript可以异步加载，因此不会干扰页面呈现

这不是真的。现代渲染引擎比我们许多人认为的要聪明得多

但是，调整浏览器窗口大小时，站点上使用多少不同的媒体查询并不重要。这可能会导致CPU和内存负载，甚至会使浏览器崩溃，但这不是有效的性能测试（没有用户不断调整其浏览器的大小，我们应该始终只关注不调整大小的事件）

此外，一些较旧的浏览器（IE-8和以前的浏览器）不支持媒体查询，如果您想使用javascript library（），则javascript无法提供比css媒体查询更高的性能

来源：

---

如果性能是您的原因，请不要这样做。您正在修改客户端在整个渲染过程中使用的一些变量。而您是在页面已经（至少是第三方）呈现并有效地重复当前页面的呈现之后执行此操作的。请注意，浏览器制造商正在努力优化渲染性能，我怀疑你的一个客户端是否比整个Chrome或Firefox团队更聪明。如果你仍然想在你的网站上建立这样的东西，你应该用科学的方法来衡量它们的差异。谢谢，这正是我需要绕过这个“神话”的东西！