Question

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

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

感谢您的任何帮助。感谢。

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

您是否曾尝试通过JS更改元标记＆＃34; viewport＆＃34;的初始比例属性？

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

具有此初始比例更改的脚本标记应该在元标记之后。在此之后，您可以在代码中的任何位置将它附加到窗口调整大小事件侦听器。

对我而言，它就像任何设备上的魅力一样，我已经尝试过了。

网站不适合iPhone

2 个答案: