Question

我有一个非常有趣的问题。我最近创建了一个基于Bootstrap的简单单页静态网站（.html），其中包含一些jQuery，并且在localhost（xampp）和实时服务器（PC和移动设备）上完美运行。

然后我在网站上添加了一个.php文件，类似于html页面，但是里面有一个脚本。上传后，一切都很好，除了移动浏览器; jQuery不起作用。 html文件工作正常，php不起作用。我尝试在Chrome-Android，Samsung Internet-Android和Safari-iOS中开放;一切都行不通。我下载了.min.js jQuery和Bootstrap文件并将它们链接起来，不起作用。改变了CDN，没有工作。改变了

$(document).ready(function(){...

到

$(function(){...

你猜对了，不行。

每次我改变时，我都会确保它在localhost和PC上运行良好，但在移动设备上它不会。

有关此问题的任何帮助？我把头撞在桌子上！

我的链接标记：

<meta http-equiv="Cache-control" content="no-transform" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">

我目前的jQuery：

<script>
    $(function() {
        $("html,window").stop().scrollTop(0);
        $("#mainmenu").stop().fadeIn(0);
        $("#scrollup").stop().fadeOut(0);
        $(window).scroll(function() {
            if ($(this).scrollTop() > ($("#about").position().top + $("#about").height()) / 2) {
                $("#mainmenu").stop().fadeTo('300', 0.5);
                $("#scrollup").stop().fadeTo(0, 1);
            } else {
                $("#mainmenu").stop().fadeTo('300', 1);
                $("#scrollup").stop().fadeTo(0, 0);
            }
        });
        $("#scrollup").click(function() {
            $("html,window").stop().animate({
                scrollTop: 0
            }, 1000, 'swing');
        });
        $("#readmore").click(function() {
            $("html,window").stop().animate({
                scrollTop: $("#projects").position().top
            }, 1000, 'swing');
        });
    });

</script>

我使用的是000webhost.com的免费计划，我主要是为了测试目的。

编辑 ：我的php脚本是一个简单的include（）函数，在所有设备上都没有任何问题。

Edit2：在进一步调查后，我发现淡入淡出功能运行良好。 scrollTop（）的函数是有问题的函数。

Answer 1

经过大量的研究，头撞和缩短我的生命周期，我发现问题不在于jQuery本身，而在于具体的功能。我注意到fadeIn，fadeOut和fadeTo函数正常工作，但scrollTop相关函数和Bootstrap jQuery无法正常工作。 scrollTop的引用，引用this old SO question，是在滚动之前将溢出设置为隐藏在body和html标签上，然后重置它。所以基本上：

CSS：

.fix{
         overflow, overflow-x, overflow-y:hidden; !important
    }

jQuery的：

$("body,html").addClass("fix").animate/scrollTop(...).removeClass("fix");

检查后，它可以在我有权访问的所有移动浏览器上运行。尽管如此，Bootstrap导航栏折叠脚本无法在移动浏览器上运行，我还没有为它找到解决方案。

<强>更新

进一步敲击后，我发现我加载了Bootstrap .css和.js BEFORE 加载jQuery：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

加载jQuery BEFORE Bootstrap的简单琐碎和逻辑变化解决了我的所有问题，显然是由于使用jQuery的BS脚本必须已经加载：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

除了滚动功能的移动修复程序外，这两个解决方案解决了我在移动设备上遇到的所有问题。

.php文件上的jQuery无法在移动设备（iOS和Android）上运行，但在计算机上运行良好

1 个答案: