Resources For IT Professionals
Page Details
  • First published by (eMicrosoft Community Contributor, Microsoft Partne)
  • When: 23 Jul 2013 2:30 AM
  • Last revision by (eMicrosoft Community Contributor, Microsoft Partne)
  • When: 23 Jul 2013 2:34 AM
  • Revisions: 2
  • Comments: 1
Options

Original

Wiki  >  TechNet Articles  >  Change CSS file in asp.net web application based on resolution of client machine  >  Original
Change CSS file in asp.net web application based on resolution of client machine
You are currently reviewing an older revision of this page.
Go to current version

To make your 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>
Revert to this revision