こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

回答受付中の質問

画像拡大機能のjsをスマホで読み込まない

ホームページの画像拡大表示に、shadowbox.jsを使っています。
このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。

<head>内に、以下のように記述しています。
<link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="../js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。
そのための手法を教えてください。
PC・iPadで動作、スマホ(iPhone・Android)で動作させないの区分けで考えています。

または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。

以上、ソースで書いていただけると助かります。
よろしくお願いいたします。

投稿日時 - 2019-05-20 14:09:23

QNo.9618396

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

そうじゃなくて。。
if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){ //もし、iPhoneかアンドロイドかモバイルなら
 // document.write(' ~~~~~~~~'); //スマホ用表示
} else{ //さもなくば
 // document.write('' ~~~~~~~~''); //パソコン用表示
 /* ここ!! PC側だけ初期化をすればいいってこと */
 Shadowbox.init();
}
それと、document.writeはサンプル程度では使いますが、
実際にはほとんど使われないので、この命令で何かを?
ってのは、面倒が増えることのほうが多いですよ。

投稿日時 - 2019-06-03 10:33:49

>getDevice が”sp“なら、読み込ませない記述は書けるのでしょうか?
読み込んでも、動かさなければ解決しそうですね。
Shadowbox.init();
こいつを、SP時は呼ばないようにしてみてはいかがでしょう?
初期化されなければ、機能しない可能性は高いと思いますよ。

投稿日時 - 2019-05-21 22:02:48

補足

補足が遅れて申し訳ありません、もう少しお知恵をください。
他のScriptでは、
<script>
var ua = navigator.userAgent.toUpperCase(); //ユーザーが使用している環境を調べる
if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){ //もし、iPhoneかアンドロイドかモバイルなら
document.write(' ~~~~~~~~'); //スマホ用表示
} else{ //さもなくば
document.write('' ~~~~~~~~''); //パソコン用表示
}
</script>
は、エラー無く実行されます。
document.write(' ~~~~~~~~'); 内に、
document.write('<script type="text/javascript">
Shadowbox.init();
</script>');
のように、scriptの記述があるとエラーになるようです。
これを、回避する方法はあるのでしょうか?
または、JavaScriptで、内包するJavaScriptを動作させること自体が、無理なのでしょうか?
細かくてすみませんが、よろしく教示願います。

投稿日時 - 2019-06-03 09:06:36

https://webnetamemo.com/coding/jquery/201606253129
そういう場合は機種判別系の考え方を使い、
あなたが求める機種で、初期化なりを
行えばOKです。
ソース付きのサイトですので、すぐにわかるとは思います。

投稿日時 - 2019-05-20 16:31:26

補足

該当ページにある以下の部分と、当方がhead内に書いているshadowbox関連の読み込み記述との関係が判りません。
初歩的質問で、申し訳ありません。

該当ページA部:var getDevice = (function(){
var ua = navigator.userAgent;~以下略

該当ページB部:if( getDevice == 'sp' ){~以下略

当方がhead内に書いているshadowbox関連の読み込み記述
<link type="text/css" href="../css/shadowbox.css" r~以下略

getDevice が”sp“なら、読み込ませない記述は書けるのでしょうか?

よろしくお願いいたします。

投稿日時 - 2019-05-21 07:49:15

あなたにオススメの質問