如何在响应式 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

FIDDLE

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

#smartphoneheight {
    height: 15%;
position: relative;
margin-bottom: -69px;
margin-top: -50px;
}


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

Answer 2

使用此链接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%;
}