SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    initial-scale=1.0, maximum-scale=1

    Ok, so I'm recoding a site to be responsive but want the site to remain the same until about 500px or so. At the moment I am using max-width: 480px and max-width: 320px and everything is fine, but on the iPad it cuts off the corners (as it should with the stated in the HTML, but I don't want this). Is there anyway to have browsers ignore the 'initial-scale=1.0, maximum-scale=1' until it reaches the 500 or so mark? Or what would be the best way around this?

    Thanks.
    Al.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's not totally clear what you are asking here, but I wouldn't use maximum-scale=1. You can set @media rules for any screen sizes, so just define the settings you want for the iPad—or for any sized screen. E.g.

    Code:
    @media only screen and (max-width: 500px) {
    
    }

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    My right side was being cut off on ipad. min-width had no effect. I added the below and it worked like a charm. That's a pripratary apple code that all the others picked up too.


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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    That's a pripratary apple code that all the others picked up too.

    <meta name="viewport" content="width=1260">
    Yes, prepretty code like that will reset the layout viewport from the default 980px to 1260px, but it means the desktop layout will be presented as is on the small screen, making the text pretty tiny, which isn't so nice. That' why I think the OP is looking for options to reorganize the page on smaller screens (that is, be "responsive").

  5. #5
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies.

    Basically, I want the site to be responsive from 480px down (will be 560px as I think that is what the iPhone 5 is in landscape), so the site should look the same on an iPad as it does on a desktop. But using this:

    HTML Code:
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
    in the HTML causes the iPad to cut off each side and scale to the width of the viewport of the iPad.

    So the real question is, how do I get the 'scale' to not affect the iPad?

    Thanks

    *Eric will that make the site look the same on iPad and Desktop?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Since you want the site to reflow on the iPhone but not iPad, I recommend you put this in the head of your document, which is a slight variation on what Eric posted:

    Code:
    <meta name="viewport" content="width=device-width">
    If you set a fixed value in place of "device-width", it might mess up the iPhone layout.

  7. #7
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for that ralph, seems like you answer all my questions. I don't have an iPad with me right now, but will check when I get my hands on it later.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Since you want the site to reflow on the iPhone but not iPad, I recommend you put this in the head of your document, which is a slight variation on what Eric posted:

    Code:
    <meta name="viewport" content="width=device-width">
    If you set a fixed value in place of "device-width", it might mess up the iPhone layout.
    What's that one do Ralph?

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This site explains it well http://blog.javierusobiaga.com/stop-...il-you-know-ho

    I still don't really get it though. Ill have to test to fully understand.

  10. #10
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Eric.

    I have another question, not sure if I should create a new thread though...

    Here it is anyway - I've seen a few sites recently that have images fall beneath each other when the veiwport scales down, and example is this website - http://footballfashion.org/wordpress/ - just wondering how this is done, nothing urgent, just curious.

    Thanks.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    This site explains it well http://blog.javierusobiaga.com/stop-...il-you-know-ho

    I still don't really get it though. Ill have to test to fully understand.
    It's a messy area, indeed, and I haven't found anyone who can really explain it properly, but this is one of the better explanations:

    http://www.quirksmode.org/blog/archi...el_is_not.html

    Quote Originally Posted by allanlud View Post
    I've seen a few sites recently that have images fall beneath each other when the veiwport scales down, and example is this website.
    To get that kind of effect, you need JavaScript. Something like

    http://masonry.desandro.com/
    http://www.wookmark.com/jquery-plugin

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    meta content="width=device-width debunked.

    With
    Code:
    <meta name="viewport" content="width=device-width">
    or nothing added





    With
    Code:
    <meta name="viewport" content="width=1260">




    So at least with my site I needed the fixed width meta in order to show the whole site and not cut off my footer. Now most likely has to do with the fixed footer. So using the first meta it just zooms in a little basically.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    width=device-width really seems to be useful only if you have @media rules at play.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    width=device-width really seems to be useful only if you have @media rules at play.
    Why would media rules change anything? Full size monitors do not seem to change a bit. So feeding a blanket rule to all seems to be fine. In which case mobiles and such get the rule with or with out media queries in place.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Once you start using @media rules for smaller devices such as iPhone, I find they don't work properly without <meta name="viewport" content="width=device-width"> in the head of the document. The link I gave above (post #11) explains why it's needed.

  16. #16
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey again guys, I'm using this
    HTML Code:
    <meta name="viewport" content="width=device-width" />
    and have @media queries kicking in at @media screen and (max-width: 480px) and all is great. The site is still full width on iPad just like Desktop, and on my Android phone is responsive.

    So all worked out for me.
    Thanks!

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Glad it's working. Thanks for the feedback.


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
  •