1

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

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

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

4

2 回答 2

0

您是否尝试过通过 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>

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

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

于 2015-03-16T11:27:28.807 回答
0

终于让它工作了。这是代码。我用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();       
    });
于 2014-08-03T09:31:00.647 回答