Geek Answers Handbook

Viewport Question

I browsed a lot of resources on the Internet for viewing (on apple.com, quirksmode.org), but I'm still a little confused ....

Say I have a page with a width of 400 pixels. Now I want to optimize it for viewing the iPad.

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

  • Will this mean that the font size will increase by 768 pixels? OR
  • My page will be reduced as if it were a width of 768 pixels, not 400 pixels?

I don’t quite understand what is the effect if we use viewport for different scenarios?

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

Can someone please help me easily understand ..

Thank.

+5
source share
3 answers

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

The key is to understand the difference between the visual viewport (browser pixel width) and the view layout (the width that your CSS wants to display in pixels on the site). Obviously, in most cases the layout viewport will be much larger than the visual viewport.

. - 950 , 320 . , , , , ?

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

+7

, , -.

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

CSS . css . css :

    @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*/}

. css -, :

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

, . , , , .

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

, . "Opera Mobile 11". , 360 320, 1,125 .

+3

( - ), viewport 480px iPad , , , , ipad.

iPad (ipad.css) . .

<link type="text/css" rel="stylesheet" 
 media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"
 href="ipad.css" />

-

@media screen and (orientation:portrait) {}
@media screen and (orientation:landscape) {}

reset css , , , .

, .

, :

0
source

More articles:


All Articles