Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts

    Tablets/Mobiles and responsive design

    So one of my recent assignment was to create a responsive design for an already existent site. It was no big deal, I made CSS media queries, got it working nicely (enough) scaling from 1920 in width down to 320, accommodating for iPads and iPhones (on both portrait and landscape orientations).

    The issue came up when i started the tablet/mobile testing. When I loaded a page on a device, it looked ok, and when I rotated the device from portrait to landscape, the page resized... but zoomed. I had to pinch zoom out to max size to get it to show up properly. It recorded the right dimensions, and the correct CSS was loaded, but it was zoomed in.

    I tested out one of the sites the client was using to show us what they wanted (Maxim), and I noticed their site doesn't have that issue. I'm wondering if anyone has experience in development for tablet/mobile devices and might have thoughts as to how I can fix it. It only does it from portrait to landscape, maintaining showing 768px width, then forcing me to zoom out to 1024px. Since landscape to portrait shrinks it, it sizes fine. Do I have to give the body an explicit width? Is there a meta tag I'm not aware of that's necessary?

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Keleth View Post
    Do I have to give the body an explicit width?
    Maybe width: 100%? I think the mobile device would render everything based on the portrait mode's dimensions.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    http://chrissilich.com/blog/prevent-...evice-rotates/

    There is also:
    Code:
    @media screen and (max-device-width: 320px) and (orientation: landscape) {}
    http://css-tricks.com/snippets/css/m...ndard-devices/
    Last edited by Sammy12; 09-05-2012 at 11:34 PM.

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Some research and I found out it can only be done (as far as I see) by disabling zooming with the viewport meta tag. So if you can't zoom, the system won't try to keep it at its previous zoom "level", and will just fit to max size.


  •  

    Posting Permissions

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