Change CSS file in asp.net web application based on resolution of client machine

Change CSS file in asp.net web application based on resolution of client machine

To make your asp.net page render smartly based on the resolution of the client desktop you might want to change CSS file with different style defined in it for different resolutions. Below is the sample java script code you can use for the same.

You can download the entire code sample from this link Sample - ASP.NET Dynamic CSS File Demo

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title>Dynamic CSS Demo</title>
 
    <script>
        //based on resolution change css on load
        var a = window.screen;
 
        var styleNode = document.createElement('link');
 
        styleNode.setAttribute('rel', 'stylesheet');
        styleNode.setAttribute('type', 'text/css');
         
        if (a.width == "800" & a.height == "600")
        {
            alert("Your system resolution is:800 * 600");
            styleNode.setAttribute('href', 'css/StyleSheet1.css');
        }
        else if (a.width == "1024" & a.height == "768")
        {
            alert("Your system resolution is: 1024*768");
            styleNode.setAttribute('href', 'css/StyleSheet2.css');
        }
        else if (a.width == "1360" & a.height == "768")
        {
            alert("Your system resolution is:1360*768");
            styleNode.setAttribute('href', 'css/StyleSheet3.css');
        }
 
        document.getElementsByTagName('head')[0].appendChild(styleNode);
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
        <p class="TextColor">This is Dynamic CSS demo. CSS will change based on the resolution of client system.</p>
 
        Green - Resolution 800*600 <br />
        Red - Resolution 1024*768 <br />
        Blue - Resolution 1360*768
    </div>
    </form>
</body>
</html>
Leave a Comment
  • Please add 6 and 4 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Mohammad Nizamuddin edited Original. Comment: modified text

Page 1 of 1 (1 items)