conditionally load some html based on window size
<p>I want to load a map, but I only want to load it if I can assume that they are on wifi. Since there is no real way to do this, I'm going to just assume that if the window width is larger then 600, that they are. Loading the iframe is a little more tricky - but just loading an image would get me started. This works, but It doesn't seem to work if I shove a bunch of complicated html in there. I'm not really sure that I should have scripts in the middle of my html anyways. </p>

<pre><code>&lt;script&gt;
  if (document.documentElement.clientWidth &gt; 600) {
    document.write("&lt;h1&gt;Hello&lt;/h1&gt;");
  }
&lt;/script&gt;
</code></pre>

<p>I thought this <a href="http://24ways.org/2011/conditional-loading-for-responsive-designs/" rel="nofollow">THIS ARTICLE</a> would help me, but it is a little over my head.</p>

<p>Does anyone have some tips or some reading for me?</p>

<p>Thanks.</p>

<h1>EDIT: Check out <a href="http://jsfiddle.net/sheriffderek/m3jZz/" rel="nofollow">this fiddle</a></h1>

<p>maybe I should have an eternal .html file and pull that in... ?</p>

<p>There are problems with escaping and stuff - when there are tons of crazy characters in embed codes etc... </p>
