将js与媒体查询相结合(与视窗相关)

Combining js with media queries ( viewport related )

本文关键字：相结合 js 媒体 查询      更新时间：2023-09-26

最近我被一个客户要求使用一个js代码片段来根据分辨率改变meta视口标签的宽度。他们说，这可能会提高该网站的移动/平板版本的性能。但我拒绝相信它，因为在我看来，它看起来有点像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);
         }
    }

也许我什么都不明白，这真的是一个更好的选择，只是宽度=device-width。如果是，你能解释一下原因吗?它能提高性能吗?

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

这可以归因于人们普遍的神话:

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

不尊重这一点可能会导致"未经样式的内容闪烁";(FOUC)，这将造成糟糕的用户体验。另一方面，Javascript可以异步加载，因此不会干扰页面呈现。

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

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

此外，媒体查询不支持一些旧的浏览器(IE-8和更早的)，在这种情况下，你想使用javascript库(response .js)，但javascript没有优势，提供激烈的性能提升 css媒体查询。

来源:

  • 响应式css性能神话
  • web性能千媒体查询
相关文章：