如何根据客户端浏览器宽度呈现c#代码答案

【问题标题】：How to render a c# code based on the client browser width如何根据客户端浏览器宽度呈现c#代码
【发布时间】：2019-06-10 11:19:49
【问题描述】：

我有一个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>

但宽度返回 null。

有人知道如何实现吗？

谢谢

【问题讨论】：

您是否有理由决定这应该发生在服务器端而不是客户端？通常CSS media query 在这里是一个合适的解决方案。
你知道 JS 和 C# 在不同的时间和不同的计算机上运行吗？
Thomas，是的，我知道这一点，但我提出了这个解决方案，因为堆栈溢出一直要求我添加代码
@spender 不，这对我的情况没有用，因为我在特定情况下渲染大量图像，我不希望在所有情况下都渲染它们然后隐藏它们通过 CSS
您愿意使用 javascript + CSS 解决方案吗？您可以将图像链接传递给 javascript 并根据客户端的屏幕生成 HTML（最初测试宽度并在调整大小时仅生成一次 HTML）宽度并在生成后使用一些 CSS 隐藏或显示它。

标签： javascript c# razor

【解决方案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>

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

运行上面的 sn-p 并调整浏览器的大小，直到上面示例中的图像消失，然后重新加载页面并查看您的 devtools 网络面板。在您将大小调整到 400 像素以上之前，图片不会下载。

见

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

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

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

【讨论】：