Grow your CSS skills. Land your dream job.

Responsive Design Looks Fine in Browser – Breaks on iPhone

  • # August 27, 2012 at 6:31 pm

    http://goo.gl/qaPKx

    If you shrink the browser to 480px or less, you will see the mobile design displays fine. However, on an actual iPhone (in portrait), it displays with the content area being much too wide.

    Here’s a picture of it on an iPhone:

    http://img703.imageshack.us/img703/1944/photoik.png

    # August 27, 2012 at 7:29 pm

    The site’s only responsive part is its changing for the iPhone size.
    It would be much easier and better to just have a separate site just for iPhone: basically, if the screen is a certain size or smaller, let a box be shown that lets people go to that site, something like this:




    ...

    With the CSS just like this:

    #send-to-mobile {
    background: white;
    box-shadow: 0 0 20px black;
    display: none;
    padding: 50px;
    }

    @media screen and (max-width: 480px) {
    #send-to-mobile {
    display: block;
    }
    }

    Then by creating the mobile site separately, you’re using a smaller stylesheet, and you’re making a much more optimised version for the iPhone, as well as being free for designing the main site specifically for desktop.

    # August 27, 2012 at 8:09 pm

    That’s a good idea, but I plan on expanding this stylesheet to work with other devices as well. I need to pinpoint this issue though before moving too far forward with it. It’s really weird that it displays fine in responsive testers, but breaks on the actual phone itself.

    # August 28, 2012 at 3:05 am

    Might have something to do with retina?

    # August 28, 2012 at 12:46 pm

    Do you have this meta tag in the head of your page?
    If it isn’t there, it will cause problems like you are having.



    # September 5, 2012 at 9:10 pm

    It ended up being a WordPress plugin that was causing the issue – even on pages the plugin was not loading on.

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

You must be logged in to reply to this topic.

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