I'm looking for a way to make my web app appear as if it is on an Android or iPhone device. I've explored various solutions, but they all have their drawbacks. My workaround involves loading the web app in the middle of an iframe, which is then placed within an image of an iPhone to frame it. However, the iframe tends to shift around based on the screen size, so it doesn't always stay centered within the frame.
Here's what I've accomplished so far:
<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>Does anyone have a foolproof method to ensure that the iframe is always centered within the image?
See the current results here.