Comments on: How to detect screen size and apply a CSS style http://www.ilovecolors.com.ar/detect-screen-size-css-style/ Mon, 06 Feb 2012 10:24:02 +0000 hourly 1 By: Elio http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-10049 Elio Mon, 09 Jan 2012 13:29:27 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-10049 David, your case would be better served using css media queries, but if for some reason you don't want to use them (for example, browser compatibility), you should change the code and write a listener that detects the window resizing, probably using the <a href="http://api.jquery.com/resize/" rel="nofollow">resize</a> jQuery method. David, your case would be better served using css media queries, but if for some reason you don’t want to use them (for example, browser compatibility), you should change the code and write a listener that detects the window resizing, probably using the resize jQuery method.

]]> By: David Ashleydale http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-10042 David Ashleydale Fri, 06 Jan 2012 20:28:55 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-10042 I know this is for screen resolution detection, not actual window size, but is there a way to do this for window size? Here's the experience I'm looking for: A user views a page at 1280 x 960 resolution, but their current window size for the browser is 600 x 600. In this case, they get 600.css. But if they drag the corner of the window and make it larger, it switches to using 600_plus.css. I know this is for screen resolution detection, not actual window size, but is there a way to do this for window size?

Here’s the experience I’m looking for: A user views a page at 1280 x 960 resolution, but their current window size for the browser is 600 x 600. In this case, they get 600.css. But if they drag the corner of the window and make it larger, it switches to using 600_plus.css.

]]> By: amit http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-9986 amit Fri, 16 Dec 2011 13:07:10 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-9986 thank you thank you

]]> By: Hans http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-9801 Hans Wed, 02 Nov 2011 12:02:08 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-9801 I pasted the Javascript inside my . I get the alert if the screen size is bigger than 800x600 and smaller than 1024x.... it won't load the css file. I tried also href=”css/detect800.css” I pasted the Javascript inside my .

I get the alert if the screen size is bigger than 800×600 and smaller than 1024x….

it won’t load the css file. I tried also href=”css/detect800.css”

]]> By: Michelle http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-9668 Michelle Sat, 22 Oct 2011 01:40:20 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-9668 Can someone please help me. I have tried to use this on a site but I cannot get it to work..... The site has been designed to fit a 1280 x 960 so I am really trying to just size it down for smaller screens. I have images and on the page and I tried to get help before but I weas told the images were too big, too wide and too heavy for the web so, "the page is going to stretch out to the size if the widest image and cut everything off because the page size cannot be smaller than the narrowest image, no matter how small the window size gets." I am confused..... Is there no way that this will work for my site then? Can anyone help me please? Can someone please help me. I have tried to use this on a site but I cannot get it to work….. The site has been designed to fit a 1280 x 960 so I am really trying to just size it down for smaller screens. I have images and on the page and I tried to get help before but I weas told the images were too big, too wide and too heavy for the web so, “the page is going to stretch out to the size if the widest image and cut everything off because the page size cannot be smaller than the narrowest image, no matter how small the window size gets.” I am confused….. Is there no way that this will work for my site then? Can anyone help me please?

]]> By: DD.Minh http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-9097 DD.Minh Thu, 08 Sep 2011 11:09:56 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-9097 <head> <title>CSS3 Screen size </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="only screen and (max-width: 1024px)" href="detect800.css" /> <link rel="stylesheet" media="only screen and (min-width: 1024px)" href="detect1024.css" /> </head> <head>
<title>CSS3 Screen size </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” media=”only screen and (max-width: 1024px)” href=”detect800.css” />
<link rel=”stylesheet” media=”only screen and (min-width: 1024px)” href=”detect1024.css” />

</head>

]]> By: DD.Minh http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-9096 DD.Minh Thu, 08 Sep 2011 11:09:12 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-9096 another way is use CSS3 ex: another way is use CSS3
ex:

]]> By: DD.Minh http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-9089 DD.Minh Thu, 08 Sep 2011 07:05:56 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-9089 if your current screen size has width>=1024 and height>=768, browser will load only 1 css files is "detect1024.css" >> That's good. But if your screen size is < 1024 Then browser have to download 2 css files (detect1024.css and detect800.css), you can check it in the Net/css panel of firebug. if your current screen size has
width>=1024 and height>=768, browser will load only 1 css files is “detect1024.css” >> That’s good.

But if your screen size is < 1024 Then browser have to download 2 css files (detect1024.css and detect800.css), you can check it in the Net/css panel of firebug.

]]> By: Andy http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-8958 Andy Sun, 28 Aug 2011 06:32:16 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-8958 All is working perfectly in firefox and safari, but opening in ie8 makes it crash completely. Is this common? Any help would be great! All is working perfectly in firefox and safari, but opening in ie8 makes it crash completely.

Is this common? Any help would be great!

]]> By: Elio http://www.ilovecolors.com.ar/detect-screen-size-css-style/#comment-8521 Elio Thu, 21 Jul 2011 23:47:25 +0000 http://www.ilovecolors.com.ar/?p=1536#comment-8521 Eunice, you could use the switch-case-break conditional structure to test for many different screen sizes and load the proper stylesheet. Eunice, you could use the switch-case-break conditional structure to test for many different screen sizes and load the proper stylesheet.

]]>