如何在响应性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 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%;
}

Answer 2

小提琴

#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>