Hello all,
I know this can be done with media-queries in CSS3, but i was experimenting with some javascript and noticed something odd that I was hoping someone could explain and help me fix.
After attaching the jQuery library, I used js to get the width of the window browser-viewport) and store that in a variable.

What I was aiming to do was write a <title></title> for the page and attach a stylesheet through <link /> using js only when the window's height was greater than 596px.
So, I wrote the following:
Code HTML4Strict:
<!Doctype HTML>
<html lang="en">
		<script type="text/javascript" src="../assets/js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var $viewportWidth = null;
				viewportWidth = $(window).width();
				if(viewportWidth > 596){
					document.write("<title>attaching stylesheet in specific viewport-sizes<\/title>");
					document.write("<link href='bigViewport.css' rel='stylsheet' type='text\/css' \/>");
		<p>This is a paragraph!</p>
		<p>This is a second paragraph!</p>
		<br />
		<p>This is a paragraph after a line-break</p>
			<input type="submit" value="submit" />

The content in the body is placeholder content, but the reason i kept it there was to show you all something— as it has to do with the issue I am having.

When I visit the page with just that html above, I assume both lines were written as the page has the title "attaching stylesheet in specific viewport-sizes". Why I said assume is that i can not see <link /> in the view-source.
Anyway, the problem that occurs is that all of the content in the body is gone. Meaning, nothing shows up on the page— its a blank white-page.
And, as I did, one can double-check that the placeholder-content is there normally if they just comment-out the js.

So my issues are:
1.) Is the <link /> line being written?
2.) Why is all the body's content gone? And how can i get it to say while writing the html with js in that condition?