android webapp customization for iphone safari

Question

I created an andoird application that has a webview to my site so that i have a web application. I want to allow iphone users to access the application using their safari by giving them a link (QR).

My problem is that my site has buttons and DIVs with specific widths and heights in pixels in their CSS and the page looks very small on the iphone safari screen (zoom is needed).

What is the best method to customize for iphone ?

Possibilites i thought of:

a) JS code that detects the iphone and runs through the DIVs and resizes them b) look for a possiblity to do in JS a "zoom-in" to a certain factor which will show the page nicely over the whole screen (is this possible?)

Any other option will be welcome too ...

Thanks,

Answer 1

You should check out the viewport meta tag .

You can set it using scaling factor:

<meta name = "viewport" content = "initial-scale = 1.0">

Or a certain width:

<meta name = "viewport" content = "width = 590">

Or to the device's width:

<meta name = "viewport" content = "width = device-width">