Getting screen size to use in CSS

Question

<style>
<script>
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
    screenW = screen.width;
    screenH = screen.height;
}
else if (navigator.appName == "Netscape" 
&& parseInt(navigator.appVersion)==3
&& navigator.javaEnabled()
) 
{
    var jToolkit = java.awt.Toolkit.getDefaultToolkit();
    var jScreenSize = jToolkit.getScreenSize();
    screenW = jScreenSize.width;
    screenH = jScreenSize.height;
}

document.write(
".wrap, html {font-family: 'PT Sans', sans-serif;     width:"+screenW+"px;height:"+screenH+"px;}"
)
</script>
</style>

This script is meant to add the user's screen size into the height and width parameters of this short CSS piece, which I have included internally, lacking a method of doing it with an external style sheet.

I'll be happy to learn a new and more efficient method of doing this. My official question, however, is will this script work?

http://www.javascripter.net/faq/screensi.htm is the page location that I grabbed this from!

Note: I do not understand this script as of yet, I simply borrowed if from another developer that uses it to get screen size in a short info page. — , Sep 16 '13 at 03:57
1. java is not javascript. 2. Do not embed a script block inside a style block. — andrewb, Sep 16 '13 at 03:58
So you're getting the screen size in pixels, and then setting it to percentages in CSS with a script tag inside a style tag? None of this makes any sense! Just set the height and width of the html tag to 100% ? — adeneo, Sep 16 '13 at 03:59
@adeneo Right, width isnt necessary, but the height of the screen is needed here. I want the page in question to not have any downward scroll. — , Sep 16 '13 at 04:01
That would be overflow:hidden, and as for your question, no, your solution will not work. — adeneo, Sep 16 '13 at 04:02
@MikeSamuel Ok, so js inside of style area = no-no. What method might I use to style a certain element in CSS to never be taller than the page height? Thanks! — , Sep 16 '13 at 04:03
I do understand the difference between the two languages, as I am learning them both, my apologies, I used the wrong name above, I'll edit. What I'm asking here, is how do I make an element be 100% of the user's browser window height, and no more/ no less — , Sep 16 '13 at 04:04
@adeneo I didnt mean to use those %s. I changed that to pixels, re-read the code. Sorry about that. Now, I still have the problem of not being able to use javascript in the style area. How do I make the page height remain no more or less than the window height? height: 100% and overflow:none; doesn't do that to my knowledge. In fact, using percentages with height has never worked well for me, as height is always varying with page content. — , Sep 16 '13 at 04:10
html { height:100%; overflow:hidden; } This is your meaning? — , Sep 16 '13 at 04:12
possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Mike Samuel, Sep 16 '13 at 05:05

score 1 · Accepted Answer · answered Sep 16 '13 at 05:14

I did this using XHTML (if it works in XHTML it works in HTML, but 99.9% of the time not vice-versa) so you know you're getting a quality example here.

First off you don't make a script element the child of a style element.

Secondly never ever put a script element inside of the body element unless you want to accrue serious damage to getting things to work down the road.

Never use document.write as it's not XHTML compatible or innerHTML as it treats code as text strings instead of code, meaning when you try to change something dumped in to the DOM it may or may not work because you may be referring to code or you may be referring to text that simply looks like code.

Save the following as example.xhtml and then open in Firefox. I recommend using Firebug's inspector to look at the DOM so you can see that the link element referring to the style sheet with the screen_height and screen_width can be confirmed at your end. Feel free to ask me any (sane) questions.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="application/javascript">
//<![CDATA[
function load_css()
{
 var l = document.createElement('link');
 l.setAttribute('href','themes/example/style.css?screen_height='+encodeURIComponent(screen.height)+'&screen_width='+encodeURIComponent(screen.width));
 l.setAttribute('rel','stylesheet');
 l.setAttribute('title','example');
 l.setAttribute('type','text/css');
 document.getElementsByTagName('head')[0].appendChild(l);
}

window.onload = function()
{
 load_css();
}
//]]>
</script>
</head>

Thank you, this worked perfectly! everyone else, sorry about my confusion and, as I said, very uneducated question. Being new to javascript is not so great, but I'll pull it in quickly, I think. — , Sep 16 '13 at 05:16
I also recommend reading about CSS3 media queries that will allow you to adjust your layout based on screen resolutions *without* the need to have a PHP variable to refer to. See my video here: http://www.youtube.com/watch?v=6MWCt9QWhyI — John, Sep 16 '13 at 05:18

Getting screen size to use in CSS

1 Answers1