Question on viewport

Question

I have gone through a lot of resources online for viewport (on apple.com, quirksmode.org), but am still confused slightly....

Say I have a page which has a width of 400 px..Now I want to optimize the same for iPad viewing..

If I set the meta viewport as device-width (which I think would mean 768px for iPad in any orientation);

1. Would that mean that my font-size would scale up for 768px ? OR
2. My page would get scaled down as if it were a 768 px width and not 400px ?

I am not really clear as to what the effect is if we use viewport for different scenarios?

Is there any negative effect of using viewport on any page (if page width < or > the set viewport width)

Could someone please help me in an easy to understand way..

Thank you.

Answer 1

I heartily recommend reading this article: http://www.quirksmode.org/mobile/viewports2.html It may answer some or all of your question about the viewport. It certainly helped me.

The key is in understanding the difference between the visual viewport (the browser's pixel width) and the layout viewport (the width that your CSS wants to render the site in pixels). Clearly in most cases the layout viewport will be much bigger than the visual viewport.

E.g. your website may be 950px wide but the browser's visual viewport may only be 320px. Ordinarily mobile browsers zoom right out to be able to display the entire page but who the hell can read that ?

So setting <meta name="viewport" content="width=320" ... > in your markup sets the layout viewport to be 320px - the same as the visual viewport !

Answer 2

Ok, to remove the confusion on media query you need to know the concept of using media query.

    @media (min-width: 768px) and (max-width: 980px) { /*css here*/} 

it checks the view port of the browser and impose the inner css code to browser. you will set different css in different media query on view port range. code will be in css file as:

    @media (min-width: 320px) and (max-width: 480px) { /*css here*/}
    @media (min-width: 481px) and (max-width: 768px) { /*css here*/}
    @media (min-width: 769px) and (max-width: 980px) { /*css here*/}
    @media (min-width: 981px) and (max-width: 1024px) { /*css here*/}
    @media (min-width: 1025px) and (max-width: 1240px) { /*css here*/}

There also have another way. adding different css file based on media query as below:

   <link type="text/css" rel="stylesheet" media="(min-width: 320px) and (max-width: 480px)" href="ipad.css" />
   ...
   ...

So, according to these query you can set different style for the same output. Now if you want to impose a different view port size which are not actually in browser, then you have to set the meta tag.

    <meta name="viewport" content="width=320, ... ">

It means, the browser set its view port and will scale down or scale up as needed according to the actual browser view port size. And it works only on "Opera Mobile 11" onward. So if your browser's view port is 360 and meta set to 320 then it will be scaled up or zoomed in by a factor of 1.125.