结合js与媒体查询（viewport相关）

Question

最近（一位客户）要求我使用 js 片段根据分辨率更改元视口标签宽度。他们说这可能会提高网站 mobile/tablet 版本的性能。但我拒绝相信它，因为在我看来它看起来与视口标签 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);
         }
    }

也许我什么都不懂，这确实是一个比 width=device-width 更好的选择。如果是，您能解释一下为什么吗？它会提高性能吗？提前致谢。

Answer 1

您的客户似乎担心 javascript 的性能提升超过 css 媒体查询以创建响应式网页设计。

这可以归因于人们之间的一个普遍神话：

browser must wait until it downloads, parses, and applies the relevant CSS before it can render the page on the screen.

不遵守这一点可能会导致“无样式内容的闪现”(FOUC)，这会造成糟糕的用户体验。另一方面，Javascript 可以异步加载，因此不会干扰页面呈现。

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

但是，当您调整浏览器大小时，您在网站上使用了多少不同的媒体查询确实很重要window。这可能会导致 CPU 和内存负载甚至会使您的浏览器崩溃 但这不是有效的性能测试 （没有用户经常调整其浏览器的大小，我们应该始终只关注非调整大小的事件）。

此外，某些较旧的浏览器（IE-8 和更早版本）不支持媒体查询，在这种情况下，您可能希望使用 javascript 库（respond.js），但除此之外，javascript 在提供比 css 媒体查询更大的 性能提升 方面没有优势。

来源：

结合js与媒体查询（viewport相关）

Combining js with media queries ( viewport related )

javascript

media-queries

viewport