Grow your CSS skills. Land your dream job.

iPad zoom problems

  • # December 25, 2011 at 9:53 am

    My site has a fixed width of 1020 pixels (970 + 25 padding on each side). When I visit it on my iPad, it actually starts with some initial zoom that I don’t want; it should just fill the entire width of the screen, without the user having to double tap or anything. It should also scale properly when you go between portrait and landscape mode.

    In fact, one of the pages behaves exactly the way I want to on iPad: http://bestlaneighborhoods.marksenff.com/pre-market-preview/
    Loads good, scales good, resizes good.

    However, the main page doesn’t work that great: http://bestlaneighborhoods.marksenff.com
    If I load it in landscape mode, the right side gets cut off the screen – but only sometimes. Then when I move to portrait mode, everything zooms in way too much. Then when I go back to landscape, things still look crappy.

    I don’t want to use meta viewport and device width stuff and all that — obviously this is not necessary because the Pre-Market Preview page works perfect without it. In fact, both pages use the exact same template code. So what am I missing on the home page here….? Anyone have a quick idea?

    Thanks all!

    mS

    # December 25, 2011 at 3:06 pm

    WTF….. all of a sudden it’s working now. Maybe cause I filled it with actual content.

    Urghhhhh… Never mind then!

    # January 3, 2012 at 2:07 pm

    I’ve seen many issues in responsive designs where rotating the device screws up the zoom level due to iOS not understanding the device width change.

    Running some tests showed that even when rotated the device, iOS was still registering the initial width.

    Here is a javascript hack that I’ve seen used which, via the meta viewport tag, disables zooming during the rotation and re-enables it when a user tries to zoom.


    if (navigator.userAgent.match(/iPhone/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
    viewportmeta.content = 'maximum-scale=1';
    // When someone touches it, let them scale it
    document.body.addEventListener('gesturestart', function () {
    viewportmeta.content = 'width=980, minimum-scale=0.25, maximum-scale=1.6';
    }, false);
    }
    }

    (Sorry about the crappy indention, I’m not sure how to enable that in the comments)

    Not saying this is the best solution; but it is a solution.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".