Grow your CSS skills. Land your dream job.

Unpredictable mobile phone response

  • # April 16, 2013 at 4:41 am

    Hi,
    I’m something of a beginner in this area but I think I’ve done all the right things to get my website to display in three different ways – with max-device-width of 320px, 480px, and anything above 480px.
    However when I look at this on a Samsung Galaxy Ace 2 mobile phone it’s not doing what I expect. At first the phone displays the above 480px version. If I refresh the page the phone then stays on the same version but zooms in. And then if I refresh again the correct page version (320px) is displayed.
    Can anyone suggest what I might be doing wrong?
    Thanks

    # April 16, 2013 at 5:47 am

    Do you have a link?

    Have you included the correct meta tag? Such as…

    Otherwise we’re working in the dark?

    # April 16, 2013 at 6:13 am

    I have:
    meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″

    And a stylesheet with this kind of thing -
    @media only screen and (max-device-width: 480px) {
    ….
    ….
    }

    # April 16, 2013 at 6:39 am

    Do you have a link?

    And I would remove `maximum-scale=1` as you don’t want to disable users ability to pinch and zoom.

    # April 16, 2013 at 6:47 am

    http://www.youviewupdate.co.uk
    Thanks for your interest.

    # April 16, 2013 at 6:53 am

    Why are you using frames? If you go to http://www.eminencegrise.talktalk.net/youview/ on mobile it works as expected but the frames are messing things up. Maybe add the viewport meta to the page with the frames?

    # April 16, 2013 at 7:03 am

    Thank you so much I’ll give it a try.

    # April 16, 2013 at 8:10 am

    It’s also laid out with tables for the most part….sigh!

    # April 16, 2013 at 9:16 am

    It was designed with Frontpage 5.0 – that’s how clued up I am! :-)

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

You must be logged in to reply to this topic.

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