html - 如何在响应式 div 中调整模拟智能手机屏幕的大小？

Question

因此，我试图在一个 div 中展示一个移动网站，该网站看起来像放置在响应式 html5 网站上的智能手机。我弄乱了 CSS，以便智能手机 div 在调整窗口宽度时保持稳定的纵横比。现在我试图在 div 中安装一个 iframe 来模拟手机的屏幕。 我遇到的问题是我的响应式 CSS 技巧弄乱了屏幕的位置。

这是一个 jFiddle:http://jsfiddle.net/E6X4j/2/

我试图将它定位为相对位置，但这会扰乱 CSS 中的响应技巧。有什么建议吗？

HTML:

<div id="smartphonewidth">
<div id="smartphoneheight">
    <object type="text/html" data="http://www.engadget.com" style="width:100%; height:100%;">    
    </object>
</div>

CSS:

#smartphonewidth {
      margin-left: 5%;
      background-image: url('http://i.imgur.com/lavEp8B.png?1?5267');
      background-repeat: no-repeat;
      width: 50%;
      padding: 20%;
      background-size: 100% 100%;}

#smartphoneheight {
    position: absolute;}

Answer 1

使用此链接 CSS3 media queries for reponsive design

要定位小型设备，我们可以使用以下语法:

@media only screen and (max-device-width: 480px) {
          //your css here
    }

请检查这个JSFIDDLE

CSS:

#smartphonewidth {
          margin-left: 5%;
          background-image: url('http://i.imgur.com/lavEp8B.png?1?5267');
          background-repeat: no-repeat;
          width: 50%;
          padding: 20%;
          background-size: 100% 100%;

}

#smartphoneheight {
    position: relative;
    z-index:1;
    width:100%;
    height:100%;
}