Search code examples
mobilemobile-website

Why does my website shrink for mobile?

The main div is 600 pixels wide. By my understanding, an iPhone 5 is 640 pixels wide. But when I pull the website up on the iPhone 5, the main div only takes up a small fraction of the screen, maybe a third. Why is that?

Website

Solution

  • So I've seen IOS shrink content so that the whole page is displayed on the phone screen when using css transforms.

    So the offending css was 

                background: url('/images/mobile-device-down-arrow.gif') no-repeat center; 
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg) scale(1);

    we replaced it with 

                background: url('/images/mobile-device-up-arrow.gif') no-repeat center;

    and it fixed the problem.

    I remember a bug in webkit for this, but I can't find it right now.