iPhone HTML question - access to body only

I'm trying to get an HTML page to render correctly on mobile devices - mainly the iPhone and Android. The page is a 448x278 image with a few lines of text below it, all centered. When someone visits the page, I want it to zoom correctly in the device's browser so that it fills the device's screen (as opposed to being fully zoomed-out).

Here's the catch, and why I couldn't find anything online that works: The page is the login page for a wireless captive portal. The hardware that it's running on (unfortunately a proprietary appliance) only allows customization of the of the page, so I can't use any meta tags.

Unfortunately, they also don't allow any so开发者_JS百科rt of scripting (other than JS). So it has to be one static HTML page that renders and works correctly in any browser.

Does anyone know of any hacks that should work for this? I tried various divs and even tables with absolute widths, but got nothing. As much as I like to do fully standards-compliant HTML 4.01, it seems like I'm going to need some hack to get this to work without access to the .

Any ideas would be greatly appreciated. Thanks, Jason

With meta-code from "ahonorstudent" you can do this:

var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'initial-scale=1.4';
document.getElementsByTagName('head')[0].appendChild(meta);

In JS of cource. That should work. But, as he pointed out; you might need to adjust the scale.

I haven't tested this, but can't you use JavaScript to append a metatag to the head-tag? It is a dirty hack, but I can't think of another way to get this done at the moment.

<meta name="viewport" content="user-scalable=yes, width=448px, initial-scale=1.4" />

Try changing the initial-scale. I believe it only affects the iPhone.