Help with mobile page, fixed div at top and iframe below
Hi I'm looking help with a mobile site I'm developing. I'm trying to get a page with a toolbar at the top of the screen that has previous and next buttons, with most of the viewport displaying an iframe containing 3rd party websites.
I have a few issues getting this working. The first is to have the toolbar fixed at the top. Mobile browsers don't natively support fixed positioning so I've achieved a workable solution where I move the toolbar back to the top of the screen with the window.onresize event. I can't move the div while scrolling as mobile browsers disable DOM rendering between the touchstart and touchend events.
The main issue I am now having is that the div toolbar displays correctly at the top however the iframe is zoomed to the top left corner of the site it has loaded. You cannot zoom out at all. You can only zoom in further and pan the site. You can only really view the iframe site in 100% of the viewport when it's loaded by itself.
Here's a wireframe of what I want to achieve..
Any help would be much appreciated!
Here's an idea of the code I'm using t开发者_如何学运维o achieve this..
There's also javascript that modifies the top and left css values of #wrapper when you scroll the screen using the window.onresize event.
<html>
<head>
<meta
name="viewport"
content="width=device-width;
initial-scale=1;
maximum-scale=1;
minimum-scale=1;
user-scalable=yes;"
/>
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >
<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>
I'm sure you've moved on by now, but for anyone Googling, I ended up dealing with a similar situation by applying CSS Scale. Re-positioning was a total nightmare, but you can get it to work. This works on an inline scrollview, and I assume it would work on an iframe:
Question/answer here: Scale HTML content using JQuery Mobile & Phonegap
Additionally, it may be worth looking into ChildBrowser vs. iframe. I'm experimenting with it now, but so far it looks useful:
https://github.com/alunny/ChildBrowser
Hope this can help someone!
Just thought I'd chip in another way to do a "fixed" position element in mobile browsers. You can simply give the content element a height and overflow: auto. Make sure the sum of the heights of the fixed header and the content element equals the page height.
<div id="page">
<div id="header">fixed header</div>
<div id="content">...</div>
</div>
#page {
position:relative;
}
#header {
position: absolute;
height: 1.5em;
}
#content {
top: 1.5em;
position:relative;
overflow: auto;
height: 400px;
}
Example: http://jsfiddle.net/william/BWA7j/
加载中,请稍侯......
精彩评论