Question

所以，我查看了有关jQuery和脚本停止工作的问题。但看起来，它们不符合我的问题：

当我在Android智能手机上切换视图时，scroll.js停止工作。链接甚至不会“跳”到目的地......

这是index.html：

    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />

        <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="./js/lightbox.min.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>

        <link rel="stylesheet" href="./css/lightbox.css"/>

        <link rel="stylesheet" href="./css/computer.css" media="screen and (min-width:981px)"></link>

        <!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
        <!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
        <link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-width:720px)">
        <!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->

        <script type="text/javascript">
            var next_move = "expand";
            $(document).ready(function (){
            if (window.matchMedia('(max-width: 720px)').matches) {
                    $("#icon-menu").on('click',function(){
                        if (next_move == "expand"){
                            $("#navigation").animate({left: '50%'});
                            $("body").animate({left: '50%'});
                            next_move = "shrink";
                    } else {
                        $("#navigation").animate({left: '0%'});
                        $("body").animate({left: '0%'});
                        next_move = "expand";
                    }
                    });
            }
            else{

            }
            });
        </script>

    </head>

和scroll.js：

 $(function() {
            $('a[href*=#]:not([href=#])').on('click',function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });

有什么事情发生在Chrome（我猜所有的webkit浏览器）和android浏览器上。当我用Firefox打开它时，滚动工作，菜单展开没有。我尝试了.noConflict（），但它只是做了，链接跳转到目的地，菜单不再扩展。

对于视图：click me

请忽略设备宽度等内容。它还没有完成，但我必须测试它。

所以真正的问题是：我究竟做错了什么？如果有冲突，我在哪里可以找到并纠正它们？

要重现此问题，只需将浏览器的大小调整为智能手机大小，然后刷新或使用智能手机。否则，该站点将显示为pc，其中everthing工作正常。

编辑：在智能手机视图的电脑上，一切都可以使用Firefox，但在实际的智能手机上，菜单不会扩展...

谢谢！

Answer 1

问题没有得到完全解答。

一种解决方案是忽略移动设备的平滑滚动。所以，代码atm看起来像这样：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./js/lightbox.min.js"></script>

    <link rel="stylesheet" href="./css/lightbox.css"/>

    <link rel="stylesheet" href="./css/computer.css" media="screen and (min-device-width:981px)"></link>

    <!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
    <!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
    <link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-device-width:720px)">
    <!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->

    <script type="text/javascript">
        var next_move = "expand";
        $(document).ready(function (){
        if (window.matchMedia('(max-device-width: 720px)').matches) {
                $("#icon-menu").on('click',function(){
                    if (next_move == "expand"){
                        $("#navigation").animate({left: '50%'});
                        $("body").animate({left: '50%'});
                        next_move = "shrink";
                } else {
                    $("#navigation").animate({left: '0%'});
                    $("body").animate({left: '0%'});
                    next_move = "expand";
                }
                });
        }
        else{
            $(function() {
            $('a[href*=#]:not([href=#])').on('click',function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });
        }
        });
    </script>

因此，链接和菜单问题已经消失，但手机所需的平滑滚动效果仍无效。

也许有人有线索。

要查看移动视图，需要宽度（不是分辨率！）为720px的设备。

jQuery：脚本突然停止工作

1 个答案: