JQuery не работает на мобильных браузерах

Question

JQuery не работает на мобильных браузерах

0

Поэтому я работаю над мобильным меню для веб-сайта, и казалось, что все работает гладко, пока я не начал тестировать его на нескольких устройствах. Измененное окно на рабочем столе было прекрасно, но мобильные телефоны делали некоторые странные вещи.

Взгляните на jsFiddle, который я сделал: http://jsfiddle.net/Amp3rsand/s9Hpa/2/

Это должно дать представление о том, чего я пытаюсь достичь. Если вы посмотрите на эту ссылку на рабочем столе, кнопка меню переключит навигационную панель без проблем, но я обнаружил, что при просмотре ее с iPhone 4 на IOS6 кнопка меню изменяется только в состояние зависания и не выполняет 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>

На рабочем столе #menu установлено значение: none; и под 480px он установлен для отображения: block; и #navigation установлен для отображения: none; Ничего особенного не происходит, кроме рестайлинга для мобильного экрана. Как вы можете видеть, я использую jQuery 1.10.2 от Google.

Затем я пытаюсь использовать jQuery для установки события click на #menu, который переключит #navigation. Вот как выглядит мой текущий код:

$(document).ready(function() {
    $.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };
    $('#menu').click(function () {
        $('#navigation').slideFadeToggle();
    });
    $(window).resize(function () {
        if(window.innerWidth > 500) 
            {
                 $("#navigation").removeAttr("style");
            }
   });
});

Я чувствую, что я, очевидно, делаю что-то неправильно, но я не могу понять, что это такое. Любая помощь будет принята с благодарностью.

Это не похоже на ошибку slideFadeToggle, я пробовал без нее без каких-либо изменений. Я попробовал кучу разных версий jQuery, и никаких изменений там не было. Я убедился, что javascript разрешен по телефону.

Фактический сайт можно найти здесь: http://www.bridgeport.net.au/new/index.html

Вы можете видеть, что есть анимация с заголовком и заголовками, и изображение будет проходить через несколько. Я нахожу, что IOS-устройства (я еще не смог протестировать на Android до сих пор) не запускают ни одну из этих анимаций.

Все работает отлично на рабочем столе, когда вы изменяете размер окна, но что-то не работает прямо на телефоне. Даже шрифты с надписью на главной странице отличаются на телефоне, и они являются веб-шрифтами Google, используя @import в css, например:

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

Я думал, что это проблема с сервером хостинга, пока я не создал страницу jsFiddle и не нашел те же проблемы. Теперь я в тупике.

Редактирование: я просто тестировал его на iphone 5 с IOS7 и обнаружил, что он делает то же самое.

Изменить 2: я понял, что jQuery, который я использовал, не учитывал события касания, поэтому я изменил функцию щелчка на:

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

И добавил в курсор: указатель; в #menu в соответствии с некоторыми предложениями, которые я обнаружил при переполнении стека.

Насколько я могу судить. Новая скрипка можно найти здесь: http://jsfiddle.net/Amp3rsand/s9Hpa/14/

Ampersand 13 дек. 2013, в 03:07

Источник

Теги:

jquery

html

css

ios

iphone

1 ответ

Ещё вопросы

nur · Answer 1 · 2013-12-13T01-28-00.000Z

вместо this.animate do $ (this).animate и посмотреть, работает ли это. У меня нет iphone, но я тестировал его в браузере по умолчанию для Android и хром (для android), он работает.

Интересно, спасибо за помощь. Я только что проверил его и обнаружил, что он не работает на моем iPhone Safari или Chrome до сих пор. Работало ли в браузере Android до изменения?
нет. это не работало до изменения