Why doesn't PhoneGap render my page differently when I add a viewport meta tag?

2
votes

I read about viewport that it change the logical window size used when displaying a page on iOS, Android, Opera and Firefox mobile browsers, and that we use the viewport meta tag to set the width and initial scale of the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

I tried the example without viewport and the one with viewport on my Galaxy S II cellphone, and I didn't notice any change! Also I tried to zoom-in the content but it doesn't zoom. I put user-scalable= yes in the content attribute, but it still doesn't zoom-in!

Note: I use PhoneGap to run the HTML file on my phone.

1
htmlcordovazoomingresponsive-designviewport
That enables you to create a responsive page, but the actual site will need the responsive code in CSS, do you have that setup too? – Brian
@Brian, sorry I can't get what you want, but the examples in my question are already using responsive code in the css file. – palAlaa
No worries, I didn't mean I needed to see the code itself, just that you need the CSS for the responsive states IN ADDITION to the viewport tags. So you're saying the examples you linked to don't work on your device either? – Brian
No, both of them are working properly, I can't find any difference between the one that used the viewport and the one that doesn't, and that my question why we use viewport! – palAlaa
We use viewport to tell the browser what behaviour to follow. When smart phones were first being released all of the web pages were rendering terribly. I know that mobile safari implemented within the browser that the viewport should be 960px, which was the typical width of a website in those days. This provided a better overall experience for all websites. With the arrival of the responsive design technique we need to override the browsers 960 viewport settings, and set it back to the device-width. – justinavery

1 Answers

1
votes

The viewport is a metatag introduced by Apple in mobile Safari in order to allow web developers to define the scale at which their sites should appear in the browser. You can read all about it here.

However, you should note that this applies to the mobile Safari browser, and not necessarily to PhoneGap (Cordova, now?). A quick search shows this (somewhat recent) thread, and it seems that currently there is no way to do this.