SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: iOS Simulator

  1. #1
    SitePoint Enthusiast escocia1's Avatar
    Join Date
    May 2001
    Location
    oaxaca, mexico
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iOS Simulator

    on MacbookPro i use iOS Simulator to test a responsive website menu which uses CSS media queries
    the 900px horizontal menu has 7 buttons and on iPad the CSS pixel resolution is 1024px x 768px so...
    in portrait mode (786px) it goes responsive and shows buttons on 2 different lines, which is perfect!
    however in landscape mode (1024px) it should show all 7 buttons on one single line but still breaks onto 2 lines
    (screenshot attached)
    i dont understand this behaviour, if the width is 1024px why is it acting as if it only has 800px?
    e.g. on my android tablet in landscape mode the menu shows on one single line, which is perfect!
    (screenshot attached)

    is this because the simulated Safari zooms into web pages automatically?
    or
    do i need to configure iOS Simulator to better simulate a real device?

    http://sinfronteras.edu.mx/p7/fine4.htm


    iOS Simulator Screen shot Jan 11, 2014, 2.59.34 PM.jpg

    2014-01-11_17.00.32_L_ASUS NEXUS 7 copy.png
    David Sutherland

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

    Try changing your viewport meta tag to this and see what happens.

    Code:
    <meta id="p7PM3" name="viewport" content="width=device-width, initial-scale=1.0">
    You missed out the initial-scale which is the important part. You also had set user-scalable to no which is not a good thing especially on a small device as users need to be in control of what they see and still be able to pinch and zoom. You also had the wrong syntax as it should have been comma separated.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Off topic, because it doesn't seem to matter, but it looks wrong to have an id on a meta element ... although the validator doesn't object. If it's not invalid, does it have any use?

  4. #4
    SitePoint Enthusiast escocia1's Avatar
    Join Date
    May 2001
    Location
    oaxaca, mexico
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that fixed it Paul, thanks a million!

    about the id on the meta its done by the experts over at Project Seven
    i was wondering about it myself to be honest, how or why is a CSS id applied to a meta tag?
    David Sutherland

  5. #5
    SitePoint Enthusiast escocia1's Avatar
    Join Date
    May 2001
    Location
    oaxaca, mexico
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by the way, about user-scalable, i don't see the point in letting mobile users zoom and pinch if the pages are already mobile optimized then there seems to be no reason apart from them keeping their bad habits, what do you think?
    David Sutherland

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by escocia1 View Post
    by the way, about user-scalable, i don't see the point in letting mobile users zoom and pinch if the pages are already mobile optimized then there seems to be no reason apart from them keeping their bad habits, what do you think?
    I can't read my mobile unless I zoom even when mobile optimised (I'm not as young as I was and eyesight is the first thing to go). I can't rely on you knowing how big my text size needs to be before I can read it comfortably

    I can see that some 'apps' or games may have a need for disabling zoom on occasions but generally on the web you just want to let the user have as much control as they need. Zooming is the one thing that mobile users know how to do and they expect it to just work so it's best not to spoil their expectations.

  7. #7
    SitePoint Enthusiast escocia1's Avatar
    Join Date
    May 2001
    Location
    oaxaca, mexico
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i agree, my eyes are going too!
    desktop browsers allow us to increase text size to suit each user which i sometimes use when default was set too small and causes eye strain
    i imagine mobile browsers should have this option too
    our job is to set a good default size (1em = 16px ?)
    the basic issue is why would we bother putting so much work into optimizing for mobile if users keep on zooming in and out all the time?
    although i do agree that user freedom is best and if they can see all they need to see then, in theory, they wont need to zoom around anymore!
    David Sutherland


Tags for this Thread

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
  •