0

Javascriptに関しては基本的に何も知らないので、助けていただければ幸いです。

ユーザーが携帯電話を使用しているときに、モバイルWebサイトへのリンクを含むdivをポップアップ表示したいと思います。当然、ユーザーがデスクトップを使用しているときにポップアップを表示したくありません。

私の問題は、CSSを適用するためのJavaScriptを取得できないことです。

これが私が使用しているjavascriptです。

<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i);

if(isMobile){
document.getElementById('mobile').style.display = 'block';
}
else{
document.getElementById('mobile').style.display = 'none';
}
;

</script>

これはdivです：

<div id="mobile" style="left:116px; position: absolute; top: 106px;">
If you would like to visit our mobile website optimized for your device, click <a href="http://m.website.org">here</a>.</div>

どんな助けでも大歓迎です。私はそれを自分で理解しようとしましたが、私は障害にぶつかりました。

より良い、完全に別個のソリューションがある場合は、それも歓迎します。

4

5 に答える 5

3

DOMがロードされた後にスタイルを適用する必要があります。これにはjQueryready()を使用することをお勧めします。

$(document).ready(function() {
  // Code here
});
于 2012-06-08T21:34:52.373 に答える
1

問題は、DOM（HTML）がロードされて操作の準備ができる前にJavaScriptが実行されていることだと思います。そのコードは、ウィンドウのonloadイベントが発生した後に発生する必要があります。いつものように、jQueryライブラリを使用することをお勧めしますが、それを使用しない例を示します。これを含める必要はありません。他に必要なjavascriptがないことに注意する必要があります。イベントが発生したときに実行されます。誤ってオーバーライドするのは簡単です。

また、デフォルトでdivを非表示にして、必要に応じてJSを使用して表示することをお勧めします。

こちらをご覧ください http://jsfiddle.net/vmuX8/1/

このスクリプトは、同じページの他のスクリプトと一緒に安全に使用できます。

私の例では、匿名（名前のない）関数を宣言します。この関数は、宣言された直後に実行されます。つまり、グローバル変数が影響を受けないように、その中の変数のスコープを設定します（window.onload関数を除く）。

于 2012-06-08T21:36:09.103 に答える
1

スクリプトonDOMReady/onLoadを呼び出すか、divの後に配置する必要があります。そうしないと、スクリプトが呼び出されたときにdivが存在しない可能性があります。

例えば。

<script type="text/javascript">

    function add_e_handler(obj, e, func){
        //test if func exists - prevents problems in IE
        if(typeof func != "undefined"){     
            if(obj.attachEvent){
                 obj.attachEvent('on' + e, func);
            }else if(obj.addEventListener){
                obj.addEventListener(e, func, false);
            }else{
                obj['on' + e] = func;
            }
       }
    }

    add_e_handler(window,'load'function(){
        var isMobile = navigator.userAgent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i);

        if(isMobile){
            document.getElementById('mobile').style.display = 'block';
        }else{
            document.getElementById('mobile').style.display = 'none';
        }
    });

</script>
于 2012-06-08T21:39:07.733 に答える
1

特定のユーザーエージェントを検索すると、今のところ目標を達成できる可能性がありますが、次の理由から、これに反対することをお勧めします。

  1. 異なるデバイスが同じユーザーエージェント（Blackberry、Android、HTCなど）を共有する可能性があり、これは異なる画面解像度と比率を意味する可能性があります
  2. 一貫性のあるブラウザを備えた一貫性のあるデバイスでも、横向きと縦向きの違いがサイトのレイアウトに影響します
  3. 将来のデバイスとブラウザテクノロジーは、手動で更新しないと対処できません

これらすべてにより、デバイスに適さないWebサイトが配信される可能性があります。

メディアクエリを使用して、ユーザー文字列ではなくビューポートサイズに基づいてページ上の要素を調整することをお勧めします。これは通常、アダプティブデザインと呼ばれます（レスポンシブデザインも含まれると言えます）。

これはCSSを使用して行います。次のようになります。

@media screen and (min-width: 0px) and (max-width: 480px) {
    #mobile {
        display: none;
    }
}

基本的に、画面サイズが0px〜480pxの場合、IDがmobileの要素は非表示になります。それ以外の場合は表示されます。

ここに、さまざまなモバイルデバイス用の標準化されたメディアクエリがあります：http：//css-tricks.com/snippets/css/media-queries-for-standard-devices/

このアプローチを使用した優れたWebサイトのコレクションがここにあります：http：//mediaqueri.es/

于 2012-06-08T21:43:16.283 に答える
0

document.write（）などを使用して、検出が正しいかどうかを確認しようとしましたか？

categorizrライブラリを使用して、デバイスがモバイルかどうかを検出することをお勧めします：https ://github.com/skookum/categorizr.js#readme

于 2012-06-08T21:32:30.587 に答える