Question

所以我有一个网络应用程序，我希望用户查看，就好像它是在Android / iPhone上。我已经看了几个解决方案，所有这些解决方案至少有一个问题。所以我的工作就是在iframe的中间加上webapp加载，它位于构成它的iphone图像的中间。丑陋，但我想要的是完美的，除了iframe根据屏幕尺寸在屏幕上移动，因此并不总是坐在框架的中间。

到目前为止我取得的成就。

  <html>
  <head>
  <meta name="keyword" content="key words, keywords" />
  <meta name="description" content="brief and to the point description of the web page." />
  <meta name="robots" content="all" />

  <style>
  #container {
position: absolute;
  top: 10%;
  left: 45%;
  width: 367px;
  height: 717px;
  margin-top: -50px;
  margin-left: -75px;
  }
  #browser {
  position: absolute;
  top: 23%;
  left: 46%;
  margin-top: -49px;
  margin-left: -64px;
  border: none;
  overflow: hidden;
  }
  </style>

  </head>
  <body style ="background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C7000D),       to(#2E0002))"; >
  <div id="container"><img src="images/ip4.png" style=""></div>

  <iframe id="browser" src="http://server.com/index.php?id=5" width="320px"       height="482px" scrolling="no">
    <p>Your browser does not support iframes.</p>
  </iframe>
  </body>
  </html>

任何完全的证明方法，每次都会在图像中间出现iframe？

在此处查看当前结果images of results

Answer 1

为什么不将手机图像分成三个div个三段？将顶部片段作为背景图像应用于第一个div，将中间片段应用于第二个div，将底部应用于第三个div。为所有三个div提供相等的宽度，将高度应用于每个div以匹配其对应的图像片段，并将每个div的margin设置为0px auto。最后，将display: block;应用于iframe，并将其绝对放在第二个（中间）div中。最后，将所有三个div包裹在一个大型潜水中，其高度与所有三个div的组合高度相匹配。然后，要将此div放在页面中间，请将其置于绝对位置，将其top: 50%; margin-top: -[one-half of height]px; left: 50%; margin-left: -[one-half of width]px;设置为body元素，以使min-width和min-height更大或等于大div的宽度和高度。

将iframe保留在图像中间

1 个答案: