0

If you open a web page that is not mobile-specific at all, say, http://dogpile.com , on an iPhone 4, mobile safari does some default zoom to show the entire page.

Does anyone know what logic it is they are actually doing, or how I can simulate this within an iFrame within any browser on a non-mobile device? Should I use a css zoom: on the iFrame document body?

EDIT: So from a NON mobile device browser, e.g. regular old safari, FF, or Chrome, I want to have an iFrame with the resolution of an iPhone and scale the page within the iframe the same way mobile safari does.

  • What browsers are you supporting? – Fresheyeball Jan 26 '12 at 07:20
  • WebKit browsers for now. And again, just to be clear since I know I wasn't before, I want to do this on a NON mobile device browser. See above edit in question. –  Jan 26 '12 at 07:22

2 Answers2

1

The math is based on the width of the <body> tag. If you don't have that you could just base in on a with of 980px which is web standard. Assuming this we can create the iframe and full size (980px wide) and then scale the iframe into place with css3. Example here How can I scale the content of an iframe?

Community
  • 1
  • 1
Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • Don't care about IE. Fresheyeball, thanks for the tip about body tag width...makes sense. –  Jan 27 '12 at 16:07
0
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
Ashraf
  • 2,612
  • 1
  • 20
  • 35
  • I know that your answer would tell mobile safari to scale the site, but I want to do this on a site within an iframe on any browser, not mobile safari. Should've mentioned that. I'm trying to imitate this scaling via CSS or some other method client-side. –  Jan 26 '12 at 07:16
  • I guess I'm still being vague. From a NON mobile device browser, e.g. regular old safari, FF, or Chrome, I want to have an iFrame with the resolution of an iPhone and scale the page within the iframe the same way mobile safari does. –  Jan 26 '12 at 07:21