Search code examples
htmlcssiframezooming

zoom content of iframe in webapp

the content I want to display is not optimized for mobile device. So I need to zoom the content out.

It is a webapp, I can not use javascript.

This is, what I basically use:

<div style="-webkit-overflow-scrolling: touch;overflow-x:hidden;overflow-y: auto;height:400px; margin: -1.2em;"> <iframe src="http://..." style="width:100%;height:390px;border: none;"></iframe></div>

For zoom i found: 

-webkit-transform: scale(0.8);

so i tried:

<div style="-webkit-overflow-scrolling: touch;overflow-x:hidden;overflow-y: auto;height:400px; margin: -1.2em;-webkit-transform: scale(0.8);">
    <iframe src="http://..." style="width:100%;height:390px;border: none;"></iframe></div>

but the result was, that the iframe was zoomed too. See: https://i.sstatic.net/U9sBI.jpg

Can you help me? Thank you and BR

Solution

  • ok i solved it

    i used

    <div style="
    -webkit-overflow-scrolling: touch;
     overflow-x:hidden;
     overflow-y: auto;
     height:800px;
     width:850px;
     margin: -1.2em;">
     <iframe src="http://" style="
         width:800px;
         height:800px;
         -webkit-transform: scale(0.4);
         -webkit- transform-origin: 0 0;
         border: none;">
    </iframe>
</div>

    if the iframe gets smaller, i simply increate the size of it. 50% of 200% = 100%