jQuery未在移动浏览器上运行_Jquery_Html_Ios_Iphone_Css

jQuery未在移动浏览器上运行

jquery html ios iphone css

jQuery未在移动浏览器上运行,jquery,html,ios,iphone,css,Jquery,Html,Ios,Iphone,Css,所以我正在为一个网站设计移动菜单，在我开始在一些设备上测试之前，一切都很顺利。桌面上调整大小的窗口很好，但手机正在做一些奇怪的事情看看我制作的JSFIDLE：它应该给我一个想法，我正在努力实现。如果您查看桌面上的链接，菜单按钮将切换导航div没有问题，但我发现在IOS6上使用iphone4查看它时，菜单按钮只会更改为悬停状态，不会执行jQuery。这和我在网站上发现的一样 html遵循以下结构： <head> <script type="text/ja

所以我正在为一个网站设计移动菜单，在我开始在一些设备上测试之前，一切都很顺利。桌面上调整大小的窗口很好，但手机正在做一些奇怪的事情

看看我制作的JSFIDLE：

它应该给我一个想法，我正在努力实现。如果您查看桌面上的链接，菜单按钮将切换导航div没有问题，但我发现在IOS6上使用iphone4查看它时，菜单按钮只会更改为悬停状态，不会执行jQuery。这和我在网站上发现的一样

html遵循以下结构：

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul id="navigation">
            <li id="home" class="current"><a href="#">Home</a></li>
            ...
            <li id="contact"><a href="#">Contact</a></li>
        </ul>
        <a href="#" id="menu"></a>
    </div>
</body>

我觉得我显然做错了什么，但我不知道是什么。任何帮助都将不胜感激

这似乎不是

slideFadeToggle

的错误，我尝试过不使用它，没有任何改变。我尝试了很多不同版本的jQuery，也没有任何变化。我已经确保手机上允许使用JavaScript

可在此处找到实际的网站：

您可以看到一些带有标题和标题的动画，图像将循环播放几次。我发现IOS设备（到目前为止我还没能在Android上测试）也没有运行这些动画

当你调整窗口大小时，桌面上的一切都很正常，但手机上有些东西不正常。甚至主页上的标题字体在手机上也是不同的，它们是在css中使用@import的google web字体，如下所示：

@import url(http://fonts.googleapis.com/css?family=Raleway:200|Josefin+Slab:400italic);

我一直认为这是托管服务器的问题，直到我创建了JSFIDLE页面并发现同样的问题。现在我被难倒了

编辑：我刚刚用IOS7在iPhone5上测试了它，发现它也在做同样的事情

编辑2：我意识到我使用的jQuery没有考虑触摸事件，所以我改为单击功能：

$('#menu').on('touchstart click', function(){
    $('#navigation').slideFadeToggle();
});

并在光标中添加：指针；根据我在堆栈溢出问题上找到的一些建议，转到#菜单

据我所知，仍然没有变化。可以在这里找到新的小提琴：

而不是这个。动画制作$（这个）。动画制作，看看这是否有效。我没有iphone，但我在android默认浏览器和chrome（适用于android）上进行了测试。很有趣，谢谢你的帮助。我刚刚测试了它，发现它在我的iphone safari或chrome上仍然不起作用。在改变之前它在安卓浏览器上工作吗？

$('#menu').on('touchstart click', function(){
    $('#navigation').slideFadeToggle();
});