Geek asks and answers

Android browser width stretched to width of iframe content despite overflow: hidden

I am trying to simulate a desktop iframe in Android (Dolphin browser) with some success. The trick used is to deliver <iframe>with position:relative;inside <div>with fixed sizes and overflow:hidden;then use jQuery Mobile (or rather just vmouse events) to handle mouse events for scrolling.

All this works fine, except for one; Despite being <iframe>cropped, the content stretches the browser according to size. This is mostly notable for height.

Here's a simplified code example in JSFiddle: http://jsfiddle.net/euKhG/

And here is the result for viewing in the Android browser: http://jsfiddle.net/euKhG/embedded/result/ (works only in the Android browser!).

Does anyone know how to fix this problem? I saw iScroll and similar offers elsewhere, but they seem to relate to frames deleted srcas follows.

+3
source share
2 answers

try setting target-densitydpi in the meta tag

    <meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>

but you will also have to change all other css in relation to this.

+2
source

, , - . iFrame , - , : - , width/height ; , , .

, div background: # ff0000, , / div, iframe, iframe : http://jsfiddle.net/kauUr/

, , div , iframe width/height , . , width height, , css justas, div. , iFrame /, , iframe, . , div , Javascript , iFrame .

<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000">
    <iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe>
</div>​

, overflow:none iframe.

0

More articles:


All Articles