締切済み

レスポンシブデザイン スマホで非表示にしたい

  • すぐに回答を!
  • 質問No.8336184
  • 閲覧数1638
  • ありがとう数3
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 73% (34/46)

レスポンシブデザインのサイトを制作していて質問です。

今現在PC表示でページを下にスクロールするとページトップへ戻るボタンが右下に出現するように制作しております。

このボタンをスマートフォンやタブレットで表示した際に出現しないようにする方法はありませんでしょうか?

html-------------------------

<p id="page-top"><a href="#wrap"><img src="" alt="" height="" width=""></a></p>

css--------------------------

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
}

script------------------------

$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});



上記のように制作しています。
よろしくお願いします。

回答 (全4件)

  • 回答No.4

ベストアンサー率 60% (231/380)

レスポンシブだから、スタイルシートで分けておられると思います。

@import url(style.css) screen and (min-width: 1000px);
@import url(tablet.css) screen and (max-width: 999px);
@import url(smart.css) screen and (max-width: 768px);

min-widthやmax-widthの値はまちまちですが、表示したくないスタイルシートのファイルで

#page-top {
display: none;
}

これで表示されなくなるはずです。
お礼コメント
kojima_masaya

お礼率 73% (34/46)

ご解答ありがとうございます。

試してみましたがやはり消えてくれませんでした・・
jsをリンクさせずに試すと消えてくれました。

cssで非表示でもjsで表示されてしまうようです。

jsは残しつつという方法を考えておりますので対応策がありましたらご教授ください。
投稿日時 - 2013-11-11 11:53:36
  • 回答No.3

ベストアンサー率 60% (3/5)

ちょうど今日同じようなことやったので。

var desupurei = screen.availWidth;
if(desupurei > 959) {
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
} else {
$('#page-top').css('display', 'none');
}

見たいな感じでしょうか。
あとメディアクエリという方法とphpでの判別方法もあります。
これらは必要に応じて使い分けるといいとおもいます。
補足コメント
kojima_masaya

お礼率 73% (34/46)

ご解答ありがとうございます。

上記で試してみたのですがトップへ戻るボタンが表示されてしまいます。

確認方法が悪いのでしょうか。
今はローカルでIEで表示して画面サイズを狭めたり、広げたり、更新したりしていますがやはり消えてくれません・・
投稿日時 - 2013-11-08 13:57:56
  • 回答No.2

ベストアンサー率 60% (3/5)

あっこちらのほうが確実かも



if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0
|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
$('#page-top').css('display', 'none');
} else {

//以下質問にかかれてたjs
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
//質問にかかれてたjsここまで
}
お礼コメント
kojima_masaya

お礼率 73% (34/46)

ありがとうございます!

ディスプレイサイズでも振り分け可能とのことですが、具体的に959px以下のデバイスについて非表示にする方法を教えていただけないでしょうか。
js初心者で、無知で申し訳ありません。

よろしくお願いします。
投稿日時 - 2013-11-07 12:38:58
  • 回答No.1

ベストアンサー率 60% (3/5)

こんにちは。

-------------------------------
if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0
|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

} else {

//以下質問にかかれてたjs
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
//質問にかかれてたjsここまで
}

----------------------------------

見たいな感じでどうでしょう。

上記はデバイスで振り分けています。
ディスプレイサイズでも振り分け可能です。
サーバサイドのphpという言語でもこれらの処理は可能だったと思います。

参考になれば幸いです。
お礼コメント
kojima_masaya

お礼率 73% (34/46)

ありがとうございました。
投稿日時 - 2013-11-07 12:38:51
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ