У меня есть очень интересная проблема. Недавно я создал простой статический веб-сайт (.html) на основе Bootstrap с некоторым jQuery в нем и отлично работает на localhost (xampp) и live-сервере (ПК и мобильных телефонах).jQuery на .php-файле, не работающем на мобильных устройствах (iOS и Android), но отлично работает на компьютере
Затем я добавил файл .php на сайт, который похож на страницу html, но имеет в нем скрипт. После загрузки все в порядке, за исключением мобильных браузеров; jQuery не работает. Файл html работает отлично, php не работает. Я попытался открыть в Chrome-Android, Samsung Internet-Android и Safari-iOS; все не работают. Я загрузил файлы .min.js jQuery и Bootstrap и связал их, но не работал. Изменены CDN, не работают. Измененный
$(document).ready(function(){...
в
$(function(){...
вы уже догадались, не работает.
Каждый раз, когда я меняюсь, я уверен, что он хорошо работает на локальном хосте и на ПК, но на мобильных телефонах это не будет.
Любая помощь по этой проблеме? Я стуча головой на стол!
Мои теги ссылка:
<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() и работает без проблем на всех устройствах.
Редакция 2: После изучения далее я обнаружил, что функции затухания в и выхождении работают достаточно хорошо. Функции с scrollTop() - это те, которые имеют проблемы.
Если файл php вызывает проблему, отправьте его код. –
@OfirBaruch Я отредактировал мой вопрос. PHP-скрипт - это функция включения, которая вызывает API wordpress. Он работает как на всех серверах и устройствах. –
Если вы удалите скрипт php - все работает так, как должно быть? –