2016-08-16 8 views
2

私の問題は何らかの理由で私の.widthがうまく動作せず、なぜ私が理解できないかということです。 JQueryはhtmlファイルで正しく参照されており、idは正しく挿入されています。 (私は思う:/これは新人のミスであると信じていますが、申し訳ありませんが解決策を探していますが、まだ見つかっています)ここはJavaScriptです。JQuery .widthは私のifステートメント内では機能しません

window.onload; 
function detectmob() { 
if(navigator.userAgent.match(/Android/i) 
|| navigator.userAgent.match(/webOS/i) 
|| navigator.userAgent.match(/iPhone/i) 
|| navigator.userAgent.match(/iPad/i) 
|| navigator.userAgent.match(/iPod/i) 
|| navigator.userAgent.match(/BlackBerry/i) 
|| navigator.userAgent.match(/Windows Phone/i) 
){ 
    return true; 
    } 
else { 
    return false; 
    } 
} 
if(detectmob()){ 
    window.alert('success'); 
    $('#content').width("100%"); 
} else { 
    window.alert('fail'); 
} 

ここに私のhtmlです。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Autofresh</title> 
    <link rel="stylesheet" type="text/css" href="styles/styles.css"> 
    <script type="text/javascript" src="styles/jquery-3.1.0.min.js"></script> 
    <script src="styles/main.js"></script> 
    </head> 
    <body> 
    <div id="content"> 
     <div id="header"> 
     //image goes here 
     <div id="navbar"> 

     </div> 
     </div> 
     <div id="video"></div> 
     <div id="registration"> 

     </div> 
    </div> 
    </body> 
</html> 

私はJavaScriptとjQueryのを学習するプロセスではまだ午前決して専門家、全く逆だとしてすべてのヘルプははるかに高く評価されます。与えられた助けをあらかじめありがとうございます。

+0

'return/Android | webOS | iPhone | iPad | iPod | BlackBerry | Windows Phone/i.test(navigator.userAgent);'関数を使用してください。 – Tushar

+1

'window.onload;'? –

+1

あなたのコンソールに '$ is undefined'と書いてあります。 –

答えて

1

オーケー、私は最初はそうあなたがブラウザからそれをテストすることができnavigator.userAgent.match(/Mozilla/i)で、あなたはその後で削除することがありますいくつかのマイナーな変更を行いました。もう1つは、JQueryのリファレンスを本文に移動したことです。JavaScriptもdocument.readyにラップしています。それは$が定義されていない

$(document).ready(function() { 
    if(detectmob()){ 
     console.log("success"); 
     $('#content').width("100%"); 
    } else { 
     console.log("navigator.userAgent"); 
    } 
}); 

https://jsfiddle.net/63nm4cxs/

に役立ちます願っています。

これはあなたの主な問題でしたが、JQueryは参照されませんでした。

+0

私に代わって私がルーキーの間違いのためにこれに取り組んできた助けてくれてありがとう:p @Jニュートン –

+0

@ジェームズアンダーソン嬉しい! –

-1
//Include jquery before this code. 
function detectmob() { 
if(navigator.userAgent.match(/Android/i) 
|| navigator.userAgent.match(/webOS/i) 
|| navigator.userAgent.match(/iPhone/i) 
|| navigator.userAgent.match(/iPad/i) 
|| navigator.userAgent.match(/iPod/i) 
|| navigator.userAgent.match(/BlackBerry/i) 
|| navigator.userAgent.match(/Windows Phone/i) 
){ 
    return true; 
    } 
else { 
    return false; 
    } 
} 
// on window load  
$(window).load(function() { 
    if(detectmob()){ 
     window.alert('success'); 
$('#content').css('width',"100%"); 
//$('#content').width("100%"); 
    } else { 
     window.alert('fail'); 
    } 
    }); 
+0

説明がうまくいくはずです。 – epascarello

+0

ウィンドウロード機能でデバイスを検出し、その幅を適用しようとしています。あなたがやっていたことは、divが描画される前に幅を適用することでした。 –

+0

.css( 'width')は必要ありません。 .width( '100%)は正常に動作します。 – Cruiser

関連する問題