Question

我正在尝试在iPhone设备上移动菜单div。当我在桌面上调整浏览器窗口的大小时，这是有效的。但是在实际的iPhone上查看它并不起作用。但是在横向模式下旋转它后，它会正确显示菜单并在纵向模式下将其旋转回来，它会保留正确的视图，但是再次刷新页面会显示错误的视图。

我正在使用viewport <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">，脚本如下：

<script type="text/javascript">
    $(window).resize(function () {
        var responsive_viewport = $(window).width();
        if (responsive_viewport <= 480) {
            $("#menu").after($("#header"));
        } else {
            $("#header").after($("#menu"));
        }
    });
</script>

有一个简单的sample，实际页面为testpage

由于苏海尔

Answer 1

问题是您正在.resize()中执行所有操作，并且仅在窗口调整大小时触发。

您需要在文档就绪时执行相同的操作，您需要检查页面加载时的初始屏幕大小。

像这样。

function ChangeDiv(width){
    if (width <= 480) {
        $("#menu").after($("#header"));
    } else {
        $("#header").after($("#menu"));
    }
}

$(function () {
    var onLoadWidth = $(window).width();
    ChangeDiv(onLoadWidth);
    $(window).resize(function () {
        var resizeWidth = $(window).width();
        ChangeDiv(resizeWidth);
    });
})

在Windows上移动div使用jquery调整大小

1 个答案: