Question

我有一个C＃代码，仅当客户端的浏览器宽度小于1200px时，我才需要实现它

我尝试了以下代码：

  $(document).ready(function () {
        $("#clientScreenWidth").val($(window).width());
        $("#clientScreenHeight").val($(window).height());
    });

<body>
<input type="hidden" value=""
       name="clientScreenHeight" id="clientScreenHeight" />
<input type="hidden" value=""
       name="clientScreenWidth" id="clientScreenWidth" />
       
       
       
       
  @{
   string height = HttpContext.Current.Request.Params["clientScreenHeight"];
    string width = HttpContext.Current.Request.Params["clientScreenWidth"];
    
  if(width <1200)
  {
      foreach (var component in leftSideComponents)
        {
          //// Code
        }
  }
  
  
  }
  
  </body>

但是宽度返回空值。

有人知道如何实现吗？

谢谢

Answer 1

这是错误的做法。您真的不需要让服务器参与这种逻辑。

<picture>元素是您的朋友：

<picture>
    <source srcset="https://interactive-examples.mdn.mozilla.net/media/examples/surfer-240-200.jpg"
            media="(min-width: 400px)">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
</picture>

在这里，如果媒体宽度小于400px，我们将显示一个空白的，透明的1px png替代物。正确缓存的图像（而不是数据url）将进一步减少带宽。如果以这种狭窄的配置加载页面，则 浏览器将永远不会下载主图像 。

运行上面的代码片段，并调整浏览器的大小，直到上述示例中的图像消失，然后重新加载页面并查看devtools网络面板。除非将尺寸调整到400px以上，否则图片将不会下载。

请参见

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

https://stackoverflow.com/a/42799282/14357

https://caniuse.com/#feat=picture

如何根据客户端浏览器的宽度呈现C＃代码

1 个答案: