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

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 的免费计划，主要用于测试目的。

edit：我的 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>

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