0

Im using the following to scale down webpages in an iframe and it works great for ordinary webpages, but if the webpage is a mobile webpage(and therefor only 320px wide) then I would like to scale it down with -webkit-transform: scale(0.90); instead of 0.30.

<div id="iframewrap">
    <iframe id="iframeid" src="http://www.mypage.com" name="iframeName" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0" height="100%"></iframe>
</div>   


<style type="text/css"> 
#iframewrap { width: 320px; padding: 0px; top:45px; position:relative; overflow:hidden;}
#iframeid { width:320px;  height:100%; margin:10px 10px 10px 10px; overflow:hidden;}
#iframeid {
    -ms-zoom: 0.30;
    -moz-transform: scale(0.30);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.30);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.30);
    -webkit-transform-origin: 0 0;
}
</style>

I have tryed a lot of stuff from googling to get the width of the page that is loaded in the iframe, to try and calculate and set the width of the iframe to something like (content width * 0.90)

Or if you have any other suggestions? Thanks.

Claes Gustavsson
  • 5,509
  • 11
  • 50
  • 86

1 Answers1

0

If I am understanding your purpose correctly I think you want to avoid scaling down too much on small screens (iPhone??).

You can use @media queries to find the device pixel ratio and write overriding CSS classes for them.

A quick googling landed me on @opticswerve's article here.

EDIT : If you want to go with the device device max width @media queries would still help as noted in the stackoverflow question here.

Community
  • 1
  • 1
Tanzeel Kazi
  • 3,797
  • 1
  • 17
  • 22
  • Thanks, but if I could get the width of the loaded content, then I could just set width * 0.80 and it wouldnt matter if the content page would be 1000px or 320px wide. – Claes Gustavsson Dec 03 '12 at 13:09
  • Then maybe this is what you may want to do. http://stackoverflow.com/questions/743129/mobile-detection-using-javascript – Tanzeel Kazi Dec 04 '12 at 06:45
  • Hi and thanks, but I dont want to check the viewport size, I want to check how wide the webpage is that is loaded in my iframe. – Claes Gustavsson Dec 04 '12 at 09:54
  • Updated the answer with another resolution. – Tanzeel Kazi Dec 04 '12 at 12:56
  • Hi Tanzeel, I think you miss understand my question. Media querys are for checking what screen resolution a phone has when it visit a webpage. But I want to check what width a webpage is that Im loading in an iframe. So media querys cant help me with this! – Claes Gustavsson Dec 07 '12 at 07:17