Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS iPad zoom problems

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #35825
    Senff
    Participant

    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

    #86802
    benjamincharity
    Participant

    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 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.