Сайт не подходит для iphone

Question

Мой сайт: http://independenttruckersgroup.com/. Это фиксированная ширина, неотвечающая страница. Как сделать так, чтобы оно вписывалось в полноэкранный режим при просмотре с iphone? Протестировано на рабочем столе браузера под Windows, IPad и Android. Все может хорошо вписаться в полный экран. Но это не удалось при тестировании с использованием браузера под Mac или iphone. Горизонтальный скроллер появится в iphone или браузере под Mac.

Для заметки ширина, которую я использую, составляет 1903 пикселя. Я прочитал, что ширина iphone по умолчанию составляет 980 пикселей. Я также читал, что, когда ширина больше, чем 980 пикселей, обычно она автоматически уменьшается, чтобы соответствовать экрану. Таким образом, элементы станут меньше, но горизонтальный скроллер не появится. Вот чего я пытаюсь достичь. Я пробовал использовать метатег в области просмотра, но не повезло с результатом.

Ценю любую помощь по этому вопросу. Благодарю.

Answer 1

Наконец-то получил его на работу. Вот код Я обертываю тело подгонкой. Надеюсь, что это помогает другим с похожей проблемой:

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

Вы пытались изменить атрибут начального масштаба метатега "viewport" через JS?

<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>

Тег скрипта с этим начальным изменением масштаба должен идти сразу после метатега. После этого вы можете прикрепить его к слушателю событий изменения размера окна практически везде в вашем коде.

Для меня это работает как шарм на любом устройстве, я попробовал это на.