网站不适合iPhone。

Question

我的网站是:http://independenttruckersgroup.com。这是一个固定宽度，无响应的页面。当我从iphone上观看时，我如何使它适合全屏?在windows, ipad和android下的浏览器桌面测试。所有这些都可以很好地放在全屏中。但在mac或iphone上使用浏览器进行测试时失败了。水平滚动条出现在iphone或mac下的浏览器中。

对于注释，我使用的宽度是1903pixel。我读到iphone的默认宽度是980像素。我还读到，当宽度大于980像素时，它通常会自动缩小以适应屏幕。所以元素会变小，但不会出现水平滚动条。这就是我想要达到的目标。我尝试使用viewport元标签，但没有运气的结果。

感谢任何帮助。谢谢。

Answer 1

终于成功了。下面是代码。我用fit-wrap包裹身体。希望它能帮助到其他类似的问题:

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

您是否尝试通过JS更改元标签"viewport"的初始规模属性?

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

具有这个初始大小变化的脚本标签应该在meta标签之后。在此之后，您可以将它附加到窗口调整大小事件侦听器几乎在您的代码的任何地方。

对我来说，它在任何设备上都像一个魅力，我已经试过了。