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

締切り済みの質問

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

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

今現在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;
});
});



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

投稿日時 - 2013-11-06 10:08:16

QNo.8336184

すぐに回答ほしいです

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

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

回答(4)

ANo.4

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

@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;
}

これで表示されなくなるはずです。

投稿日時 - 2013-11-09 20:20:40

お礼

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

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

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

jsは残しつつという方法を考えておりますので対応策がありましたらご教授ください。

投稿日時 - 2013-11-11 11:53:36

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

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での判別方法もあります。
これらは必要に応じて使い分けるといいとおもいます。

投稿日時 - 2013-11-07 21:29:25

補足

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

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

確認方法が悪いのでしょうか。
今はローカルでIEで表示して画面サイズを狭めたり、広げたり、更新したりしていますがやはり消えてくれません・・

投稿日時 - 2013-11-08 13:57:56

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



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ここまで
}

投稿日時 - 2013-11-06 13:04:03

お礼

ありがとうございます!

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

よろしくお願いします。

投稿日時 - 2013-11-07 12:38:58

こんにちは。

-------------------------------
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という言語でもこれらの処理は可能だったと思います。

参考になれば幸いです。

投稿日時 - 2013-11-06 12:52:02

お礼

ありがとうございました。

投稿日時 - 2013-11-07 12:38:51

あなたにオススメの質問