website doesn't fit on iphone

Question

My website is: http://independenttruckersgroup.com. It's a fixed width, non-responsive page. How do I make it fit into full screen when viewing from iphone ? Tested on browser desktop under windows, ipad, and android. All can fit in nicely into full screen. But it failed when tested using browser under mac or iphone. A horizontal scroller appear in iphone or browser under mac.

For the note, the width I'm using is 1903pixel. I read that the default iphone width is 980pixel. I also read that, when the width is bigger than 980pixel, usually it will be automatically scale down to fit the screen. So the elements will becomes smaller, but no horizontal scroller appear. Which is that is what I'm trying to achieve. I've trying using viewport metatag, but no luck with the result.

Appreciate any help on this. Thanks.

Answer 1

Finally got it to work. Here is the code. I wrap the body with fit-wrap. Hope it helps other with similar issue:

app.fn.autofit = function() {
    // initial fixed width
    var minW = 1903;

    if ($(window).width() < minW) {
        var ratio = $(window).width() / minW;

        // For chrome and safari, use zoom
        var detect = navigator.userAgent.toLowerCase();
        if((detect.indexOf('chrome') + 1) || (detect.indexOf('safari') + 1)) {
            $(document.body).css('zoom', ratio);
        } else {
            // Other browser that doesn't support zoom, use -moz-transform to scale and compensate for lost width
            $('#fit-wrap').css('-webkit-transform', "scale(" + ratio + ")");
            $('#fit-wrap').css('-moz-transform', "scale(" + ratio + ")");
            $('#fit-wrap').css('-ms-transform', "scale(" + ratio + ")");
            $('#fit-wrap').css('transform', "scale(" + ratio + ")");
            $('#fit-wrap').width($(window).width() / ratio + 10);
        }
    } else {
        $(document.body).css('zoom', '');
        $('#fit-wrap').css('-webkit-transform', "");
        $('#fit-wrap').css('-moz-transform', "");
        $('#fit-wrap').css('-ms-transform', "");
        $('#fit-wrap').css('transform', "");        
        $('#fit-wrap').width("");
    }
} 

    // init autofit
    app.fn.autofit();

    // Resized based on screen size
    app.el['window'].resize(function() {
        app.fn.autofit();       
    }); 

Answer 2

Have you tried to change meta tag "viewport"'s initial-scale attribute through JS instead?

<meta id="viewportElement" name="viewport" content="width=1903"/>
<script type="text/javascript">
    function changeViewportInitialScale() {
        var ratio = 1,
            minWidth = 1903,
            windowOuterWidth = window.outerWidth;

        if (windowOuterWidth < minWidth) {
            ratio = windowOuterWidth / minWidth;
        }
        viewportElement.setAttribute("content", "initial-scale=" + ratio);
    }
    changeViewportInitialScale();
</script>

Script tag with this initial scale change should go right after meta tag. After this you can attach it to window resize event listener pretty much everywhere in your code.

For me it works like a charm on any device, I've tried this on.