Question

最近我被（客户端）要求使用js片段根据分辨率更改元视口标签宽度。他们表示可能会提高该网站的移动/平板电脑版本的性能。但是我不敢相信它，因为在我看来它看起来有点像viewport标签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);
         }
    }

也许我不理解任何事情，这只是一个更好的选择，只是宽度=设备宽度。如果是的话，你能解释一下它为什么吗？它会提高性能吗？提前谢谢。

Answer 1

您的客户似乎担心使用javascript而不是css媒体查询来创建响应式网页设计。

这可归因于以下人群中常见的神话：

浏览器必须等到下载，解析并应用相关内容 CSS之前可以在屏幕上呈现页面。

不尊重这一点可能会导致“无格式内容的闪现”（FOUC），这会造成糟糕的用户体验。另一方面，Javascript可以加载异步，从而不会干扰页面呈现。

这不是真的。现代渲染引擎比我们许多人都更加聪明。

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

此外，某些较旧的浏览器（IE-8和之前的版本）不支持媒体查询，在这种情况下，您希望使用javascript库（respond.js），否则javascript没有上手通过css媒体查询提供显着的性能提升。

<强>来源：

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

1 个答案: