How to render a c# code based on the client browser width

Question

I have a c# code, I need it to be implemeneted only if the client's browser width is smaller than 1200px

I tried this code:

  $(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>

but the width returned null.

Is there any one knows how to implement that ?

Thanks

Is there a reason that you decided that this should happen server-side rather than at the client? Usually a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) would be an appropriate solution here. — spender, Jun 10 '19 at 11:22
are you aware that JS and C# run at different times and on differrent computers? — Thomas, Jun 10 '19 at 11:22
Thomas, yes i am aware of that, but I put this solution because stack-overflow keeps ask me to add a code — Saif Obeidat, Jun 10 '19 at 11:25
@spender No this will not be useful for my case, because I am rendering a large number of images in specific case, and I don't want them to be rendered in all cases and then hide them by CSS — Saif Obeidat, Jun 10 '19 at 11:27
are you open to using a javascript + CSS solution? You can pass the image links to javascript and generate the HTML based on the client's screen (test the width initially and on resize and only generate HTML once) width and use some CSS to hide or show it after it has been generated. — Aayush Sharma, Jun 10 '19 at 11:34

spender · Answer 1 · 2019-06-10T11:55:17.387

You're going about this the wrong way. You really don't need to involve the server with this logic.

The <picture> element is your friend here:

<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>

Here, we display a blank, transparent 1px png stand-in if the media-width is less that 400px. A properly cached image (instead of a data url) will reduce bandwidth further. If the page is loaded in this narrow configuration, the main image is never downloaded by the browser.

Run the snippet above and resize your browser until the image in the example above disappears, then reload the page and look at your devtools network panel. The image won't download until you resize above 400px.

See

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

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

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

How to render a c# code based on the client browser width

1 Answers1