Select different CSS style sheet for different browser window sizes?
Question
I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position.
Here's how I center my div--you can see why the top of the div gets cut off in smaller browser windows.
{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}
(It's really wide to accommodate the animation working on even the widest screens--the width isn't an issue.)
Here's a page to look at: http://ianmartinphotography.com/test-site/
And my CSS: http://ianmartinphotography.com/test-site/css/basic.css
This is easily fixed in my CSS style sheet, but it seems like I can't have it both ways for monitors greater than 600px and monitors smaller than 600px.
So, how do I detect a browser window size and then select one of two different CSS style sheets? One for small windows, another for larger windows? Is there a jquery script that will do this for me?
Or, is there another way to make my div center in the middle of the browser window with CSS that will allow scrolling so that the top of the div can be accessed on smaller browser windows?
Thanks for your thoughts!
7 answers
solution1
4 2011-03-20 01:59:53
@media queries are my preference (saw that you don't like them as a solution per se), but they really could do the trick - especially if you adjust your css a little to accommodate.
<link...media="only screen and (max-height: 600px)" href="small-device.css" />
small-device.css = div.container { ... height:500px; margin:50%; ...}
<link...media="only screen and (min-height: 601px)" href="big-device.css" />
big-device.css = div.container {... height:600px; margin:50%; ...}
You may also have a little more luck by removing your absolute positioning and taking advantage of normal document flow. It would help you to add things like { overflow-y:scroll; } { overflow-y:scroll; } to those hidden-by-screen-height divs.
I think in the end, if you're trying to design around hand-held devices, you'll need media queries to some extent. My Android screen (for example) has 3 display options (low, medium, hi def). All 3 crop pages differently.
solution2
1 2011-03-20 01:08:25
You can determine window size by Jquery
$(window).width();
$(window).height();
or
$(document).width();
$(document).height();
then change css
$("link").attr("href", "blue.css");
Something like this:
$(document).ready(function(){
if($(document).height() > 600 or $(window).height() > 600){
$("link").attr("href", "600+.css");
} else {
$("link").attr("href", "600-.css");
}
});
solution3
1
A solution that works in all major browsers. No JS needed. Vertically/horizontally centered, scrollable, sticks to the top when content is larger than viewport.
HTML:
<div id="body">[your content goes here]</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
#body {
margin: 0 auto;
}
Don't forget to apply the last rule, it will actually perform the horizontal centering.
solution4
0 2011-03-20 00:53:29
Use the following JavaScript conditional to detect screen size.
function x() will handle inserting the CSS link in the <head> tag. All you need to do is call the function and pass in the CSS file name.
< script type = "text/javascript" >
<!--
function x(y) {
var styles = y;
var newSS = document.createElement('link');
newSS.rel = 'stylesheet';
newSS.href = 'data:text/css,' + styles;
document.getElementsByTagName("head")[0].appendChild(newSS);
}
if ((screen.width >= 1024) && (screen.height >= 768)) {
x('file.css');
}
else {
x('file1.css');
}
//-->
< /SCRIPT>
solution5
0 2011-03-20 00:54:59
Just did a bit of googling and found this:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
does that work for you?
solution6
0 2011-03-20 01:01:34
Try the Less CSS Framework: http://lessframework.com/ ,
You do not need JavaScript, but rather you can use CSS @Media to set styles based on resolution/ screen size.
Best of luck
solution7
0 2011-03-22 11:15:44
If "document_height" not work, try "window_height" i comment it in code!
$("link").attr("href", "css_file_path"); // here must insert path to your css, replace it in the code below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
document_height = $(document).height();
//window_height = $(window).height();
//if(window_height > 600){
if(document_height > 600){
alert('Bigger than 600px height: ' + $(document).height());
$("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;
} else {
alert('Smaller than 600px height: ' + $(document).height());
$("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.