2017-02-01 6 views
0

私は非常に興味深い問題があります。私は最近、Bootstrapに基づいたシンプルな1ページの静的なWebサイト(.html)をいくつかのjQueryとともに作成し、localhost(xampp)とライブサーバー(PCと携帯電話)で完全に動作しています。jQueryの.phpファイルはモバイル(iOSとAndroid)では動作しませんが、コンピュータでは完璧に動作します

次に、サイトに.phpファイルを追加しました。これはhtmlページに似ていますが、スクリプトがあります。アップロード後は、モバイルブラウザを除いてすべて正常です。 jQueryは機能しません。完璧に動作するHTMLファイル、PHPは動作しません。私はChrome-Android、Samsung Internet-Android、Safari-iOSでオープンしました。すべて動作していません。私は.min.js jQueryとBootstrapファイルをダウンロードしてリンクしましたが、動作しません。変更されたCDNは動作しません。

$(function(){... 

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

を変更し、あなたが働いていない、それを推測しました。

私が変更するたびに、私はそれがローカルホストと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()を持つ関数は、問題がある関数です。

+0

PHPファイルで問題が発生した場合は、コードをお知らせください。 –

+0

@OfirBaruch私は私の質問を編集しました。 phpスクリプトは、wordpress APIを呼び出すインクルード関数です。これは、すべてのサーバーとデバイスで動作するはずです。 –

+1

PHPスクリプトを削除すると、すべてが正常に動作しますか? –

答えて

0

多くの研究、頭が強く、寿命が短くなった後、問題はjQuery自体ではなく特定の機能であることがわかりました。 fadeIn、fadeOut、fadeToの各関数は正常に動作していますが、scrollTop関連の関数とBootstrap jQueryは機能していませんでした。 this old SO questionを参照しているscrollTopの修正は、スクロールしてからリセットする前に、bodyタグとhtmlタグにhiddenを設定することでした。だから、基本的には:

CSS:

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

jQueryの:それは私がへのアクセス権を持つすべての携帯電話のブラウザ上で動作を確認した後

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

。それでも、Bootstrap Navbarの折りたたみスクリプトはモバイルブラウザでは機能していないため、まだ解決策を見つけることはできません。さらにヘッドバンギングした後

UPDATE

、私はブートストラップの.cssをロードしていることが分かったと。JS ロード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を使用したため、BSスクリプトに明らかにすべての私の問題、解決前負荷のjQueryの簡単な些細なと論理変更:

<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> 

スクロール機能のモバイルフィックスに加えて、これらの2つのソリューションは、モバイルデバイスで発生したすべての問題を解決しました。

関連する問題