Resources For IT Professionals
Post an article
Wikis - 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
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  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

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>
, [Edit tags]
Leave a Comment
  • Please add 5 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
  • Posted by
    on 23 Jul 2013 2:34 AM

    Mohammad Nizamuddin edited Original. Comment: modified text

Page 1 of 1 (1 items)