SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    199
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    RWD - how do seem whole without zoom out...from the start after initial load

    RWD
    http://www.coop-polis.com= this in potrait - below 960px - seem cut on the right and when zoom out seem whole - the desired... how do seem whole without zoom out...from the start after initial load?

    I used:

    HTML Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I can an error on that link:
    Oops! Google Chrome could not find www.coop-polis.com=

    Did you mean: www.*coop-*polis.*com
    If you are the viewport meta tag then it is up to you to make the page fit on various devices by using media queries to make it fit as required. hat usually means creating a responsive layout of some sort.

    If you do not have media queries in place then you don;t need the viewport meta tag and you should let the device scale the page to fit as required. This of course means that on a small mobile screen the text will be very small as the whole layout will be assumed to be 980px width and then scaled to fit the 320px width viewport. On an ipad in landscape this will probably not be an issue but as devices get smaller the layout is zoomed smaller to fit the device.

    When you add the viewport meta tag you basically tell the devices that you will be handling how the layout will look which means it won;t get zoomed in or out and then you use media queries to adapt the layout to fit better in smaller screens.

    Does that answer your question or did I miss the point?

  3. #3
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    199
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://www.coop-polis.com

    try without "=" , by mistake typed "=" ...

    you mean without media Queries and without viewport tag => screen of web site(width) fits device(width)? in this case can zoomed? same is true for xhtml non html5 pages?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if I am understanding you correctly but the following may answer your question.

    If you omit the viewport meta tag then the device will try and scale the page to fit the device as best as it can.

    If you add the viewport meta tag then its up to you to set the appropriate width for the device (via media queries). If you don't adapt the layout then it will stick out of the viewport as though you had just closed the window on a desktop machine and sized it down to 320px.

    If you are talking about something else such as the values for initial-scale in the viewport meta tag then that is a different concept.

    I'm not quite clear on which aspect you are querying but form your comments about 960px width then I guess you are finding that content on an ipad is sticking out of the viewport. If so then that's because you have added the viewport meta tag and the ipad expects you to adjust the layout to make it fit properly. If you remove the meta tag then the ipad will scale the page smaller to fit automatically (within reason).

    The main point is that if you are building a responsive web site then you need the viewport meta tag so that the mobile device takes note of the media queries you are setting which will control how the layout looks.

    If you have not build a responsive layout and don't use media queries then omit the viewport meta tag.

  5. #5
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    199
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thks for quick response ... you say

    "If you remove the meta tag then the ipad will scale the page smaller to fit automatically (within reason)."

    in this case user still have the ability zoom in or out? if yes to what zoom factor/level?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lse123 View Post

    in this case user still have the ability zoom in or out? if yes to what zoom factor/level?
    To whatever the limit is on the device. The user will be able to zoom the page larger as long as you have not restricted it with user-scalable = "no" or with maximum scale = 1.

    See here for more info and explanation.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •