Q&A
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> body { margin: 0; } header { position: fixed; padding: 3em 0; width: 100%; font-size: 2em; text-align: center; color: #fff; background-color: #000; transition: .3s; } main { height: 2000px; text-align: center; background-color: #fff; } footer { padding: 3em 0; text-align: center; color: #fff; background-color: #000; } .is-animation { padding: 2em 0; font-size: 1em; } #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; } </style> <script src="js/jquery-3.1.1.min.js"></script> </head> <body> <header>ヘッダー</header> <main>コンテンツ</main> <footer>フッター</footer> <p id="page-top"><a href="#wrap">PAGE TOP</a></p> <script> 'use strict'; //header_scroll $(function(){ $(window).on('load scroll', function() { var scrollPos = $(this).scrollTop(); if ( scrollPos > 50 ) { $('header').addClass('is-animation'); } else { $('header').removeClass('is-animation'); } }); }); //scroll_topbtn $(function() { var showFlag = false; var topBtn = $('#page-top'); topBtn.css('bottom', '-100px'); var showFlag = false; $(window).scroll(function () { if ($(this).scrollTop() > 150) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '20px'}, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-100px'}, 200); } } }); topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> </body> </html> コード
現在分かっていることは、
PC(Chrome,Edge,Firefox)では動作します。
また、エラーコードは出ていません。
現在Dwを使用していて、デバイスプレビューでスマホ(safari)でも確認しています。
しかし、スマホではスクロールしても何も変化がありません。
iPhoneを使用しているのですが、設定で「デスクトップ用webサイトを表示」のすべてのwebサイトにチェックを入れると
スマホでも動作しますが、スマホでPCサイトを見るためだけの設定だと思うので、チェックを外すとやはり動作しなくなります。
jqueryはまだ始めたばかりで詳しくないので、わかる方初心者にでも分かりやすく教えて頂きたいと思います。
宜しくお願いします。
回答1件
0
ベストアンサー
metaタグのviewportが記載されていないです。
スマートフォンサイトには必ず付けてください。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
投稿2019/08/19 23:03
総合スコア2937
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/20 00:36