0

I want to be able to have a portion of content (a 320x50 ad) that floats above my main site content but does not get scaled (zoomed out) by safari. The problem I'm trying to solve is the ad is a static size and when safari zooms the site out then the mobile ad becomes tiny. I don't want to make a mobile specific (320 width version of the site either).

I can add this in the header but then none of the content gets scaled:

    <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

I've tried running that meta tag in an iframe but that has no effect. I'm wondering if there's an iframe, css or javascript solution.

The only javascript solution I can think of is to float a div and check the page width / height and then dynamically size the floating dev based on the iphone zoom. The problem with this is the ad image is a static size so will still look tiny.

Any ideas?

Thanks!

djburdick
  • 11,762
  • 9
  • 46
  • 64
  • Possible duplicate: [disable zoom on a div but allow zoom on the page an alternate div](http://stackoverflow.com/questions/13886763/disable-zoom-on-a-div-but-allow-zoom-on-the-page-an-alternate-div) – Robbie JW Aug 08 '13 at 20:54

1 Answers1

0

This can be done by using the -webkit-transform: scale in css and detecting the dom width and adjusting the scale number.

   <style type="text/css"> 
        iframe
        {        
            -webkit-transform: scale(1.5);
        }
    </style>
djburdick
  • 11,762
  • 9
  • 46
  • 64