html - How to preserve responsive design in mobile browser's iframe? -

I would like to load a responsive design website in one of the IFrame as one of the pages of my website However, when it Loaded in iframe, the site loses its response.

Using Mashable.com as an example (which is designed in responsive design) - My code looks like this:

  & lt; Body & gt; & Lt; Style & gt; Body {width: 100%; Height: 100%; Margin: 0; Overflow: hidden; Background color: # 252525;} #iframe {condition: full; Left: 0px; Up: 0px;}  gt; & Lt; Iframe id = "iframe" name = "iframe1" frameborder = "0" width = "100%" height = "100%" src = "http://mashable.com" & gt; & Lt; / Iframe & gt; & Lt; / Body & gt;   
 If you go to mashable.com on your phone, you will see a responsive design in action. However, if you go to the top page on your phone, Mashable's responsive design is not working.  
 Does anyone know how to load a web page in a single device and have a responsive design?  
 Thanks in advance!  
  
 
 
  Meta Tags  " Viewport " Scale the page not telling the  mobile browser  on the page's head Safari on the desktop already respects the responsive design of the iframe content.  
  & lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum -scale = 1.0 max-scale = 1.0" />   
 Meta tags  with    and     to edit it in the Meta tag For  
 tested on NB iPhone 5 (iOS 6) and Safari 6.