Modernizr touch in iframe

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

<h1>Modernizr Test</h1>           
<pre id="touch">
#touch

.no-touch #touch { background: green; }
.touch #touch { background: red; }
</pre>


<pre id="pointer">
#pointer
    
@media (pointer:coarse) {
  #pointer { background: orange; }
}
@media (pointer:fine) {
  #pointer { background: red; }
}
</pre>

<button>1) Add iframe</button>

<a href="http://jsfiddle.net/UVHck/embedded/result/?next" target="wrapped">2) Navigate iframe</a>

<div id="wrapper" style="width: 400px; height: 400px;"></div>

CSS

.no-touch #touch { background: green; }
.touch #touch { background: red; }

#wrapper {border: 1px dashed orange;}

@media (pointer:coarse) {
  #pointer { background: orange; }
}
@media (pointer:fine) {
  #pointer { background: red; }
}

JavaScript

$(function (){
  $('button').on('click', function(){
    $('#wrapper')
      .append("<iframe id='wrapped' src='http://s.typeapp.com/ws/CT8PpS8KTlF' width='400' height='400' />");
  });
});