PCブラウザで見える画像がスマホで表示されない (Javascript)

  • 解決済 makotos1112

    (@makotos1112)


    3年、 9ヶ月前

    PCのブラウザでは表示される画像が、自分のスマホで確認すると表示されません。
    PCのgoogleデベロッパーツール上ではスマホの画面に切り替えても正常表示されています。
    コードの問題なのか、私のスマホの機種に依存する問題なのかご見解をお伺いしたいです。
    (iPhone SE(旧)のgoogleを使用)

    下記のhtmlとjacascriptのcloneNodeを利用して、
    ページ内で同じ画像を再表示させようとしています。
    PCブラウザでは2枚目の画像も見れるのですが、自分のスマホでは2枚目が見えませんでした。
    画像を示す様な透明な縁取りのある枠は現れましたが、画像自体は表示されない状態です。

    ■html■
    <div id=”source”>画像</div>
    <div id=”appendclone”></div>

    ■javascript■
    // 複製するHTML要素を取得
    var source = document.getElementById(“source”);
    var content = document.getElementById(‘appendclone’);
    // 複製
    var newNode = source.cloneNode(true);
    // 複製した要素の属性を編集
    newNode.id = “source2″;
    // 複製した要素を反映
    content.appendChild(newNode);

    ■function.phpへの追記■
    //追加のJAVAスクリプトを反映させる（clone.js)
    if (!is_admin()) {
    function register_script(){
    wp_register_script( ‘clone’, get_stylesheet_directory_uri() . ‘/js/clone.js’, array( ‘jquery’ ), ”, true);
    }
    function add_script() {
    register_script();
    wp_enqueue_script(‘clone’);
    }
    add_action(‘wp_enqueue_scripts’, ‘add_script’);
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック投稿者 makotos1112

    (@makotos1112)

    3年、 9ヶ月前

    $(window).on(‘load’, function(){
     var content_area = window.document.getElementById(“content_area”);
    var contentsNode = window.document.getElementById(‘appendclone’);
     var newNode = content_area.cloneNode(true);
    newNode.id = “content_area2”;
    contentsNode.appendChild(newNode);
    });

    ウェブページを参考に、$(window).on(‘load’, function(){ });
    で処理を囲ってみました。結果、スマホでクローン先(appendclone)の画像が見えたり見えなかったりします。PCの結果は正常です。

    まだ画像の出力が不安定なため、安定して出力できるようアドバイスをお願いします。

    トピック投稿者 makotos1112

    (@makotos1112)

    3年、 9ヶ月前

    自己解決できたのでクローズします。
    <div>自体をクローン要素として取得するのではなく、厳密にをコピーして複製することで安定して出力できるようになりました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「PCブラウザで見える画像がスマホで表示されない (Javascript)」には新たに返信することはできません。