ブログの再設計の過程で、デスクトップだけでなくモバイルデバイスにも「トップへスクロール」機能を作成したいという要望がありました。 スマートフォンの画面に小さな空きスペースがあるため、画面の下部に高さ20pxのストリップの形で上部に戻るボタンを作成することにしました。 コードは非常に簡単です：
$('body').append("<div class='scroll-to-top-mobile'>Scroll To Top</div>"); // $(window).scroll( function() { if ( $(this).scrollTop() > $(window).height() ) { // , ... $('.scroll-to-top-mobile').fadeIn(); // } else { // , ... $('.scroll-to-top-mobile').fadeOut(); // } }); $('.scroll-to-top-mobile').on('click', function() { $('html, body').animate({scrollTop : 0}, 800); // return false; });
.scroll-to-top-mobile { width: 100%; height: 20px; background: #e6e6e6; border-top: 1px solid #ddd; position: fixed; /* , */ bottom: 0; /* */ z-index: 9999; /* */ text-align: center; display: none; /* */ cursor: pointer; font-size: 12px; }
デスクトップでは正常に動作しますが、Android 2.3でのテスト中にその位置が判明しました。 動作しません、アイテムは絶対に配置されます。 少し調べてみると、バージョン5までのiOSとバージョン3までのAndroidでは固定位置がサポートされていないことが判明しました。 他のブラウザによるサポートはここに書かれています 。
彼らはまた、Android 2.3がメディアクエリを使用してこのプロパティを理解するように教えることができると言っています。
@viewport { user-zoom: fixed; }
または、メタタグを使用します。
<meta name=”viewport” content=”user-scalable=no” />
この機能は、ページをスケーリングする機能を無効にします。
現在、ドキュメントをズームする可能性がなければ、スマートフォンの画面上のテキストの読みやすさの問題が重要になります。 デスクトップ画面上のテキストの視覚的なサイズは、スマートフォン画面上のサイズとは異なります 。詳細については、 こちらをご覧ください 。 なぜなら ブログはRWD技術に完全に基づいているため、電話用に別のバージョンを作成することは意味がありません。 ここでは、メディアクエリのdevice-aspect-ratioを使用したモバイルデバイスの識別が役立ちます。 この関数を使用すると、指定されたアスペクト比を持つデバイスでのみ、含まれるCSSを使用できます。 iPhoneでは、この数値は1.5、Android 1.3では1.5です。 したがって、必要なデバイスを決定し、ページ上でそれらに最適なフォントサイズを設定できます。
@media all and (max-device-aspect-ratio: 1.5) { body { font-size: 16px; line-height: 1.4em; } }
または、メタタグを使用します。
<link rel=”stylesheet” href=”css/mobile.css” type=”text/css” media=”all and (max-device-pixel-ratio: 1.5)” />
Android 2.3で新しい設定をテストした後、メディアクエリを使用して設定されたパラメーターが有効になるのはページがリロードされた後であり、場合によっては有効にならないことがありました。 ここで、 JSコードの数行に値する素晴らしいソリューションが助けになりました。 簡単なスクリプトでモバイルデバイスを識別できます 。
// var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if(mobile){ // CSS var cssLink = document.createElement("link"); cssLink.setAttribute("type", "text/css"); cssLink.setAttribute("rel", "stylesheet"); cssLink.setAttribute("href", "css/mobile.css"); document.head.appendChild(cssLink); }
navigator.userAgentはUser-Agentの文字列を返し、指定されたデバイスの1つの名前を探します。 この場合、テキストをモバイル画面に適応させるために必要なパラメーターを含むCSSファイルのリンクを作成します。 確かに、スクリプトはドキュメントの読み込み後にのみ機能するため、接続されたCSSのパラメーターは1〜1.5秒後に有効になります。
そのため、単純な「一番上にスクロール」機能では、それぞれに解決策があるため、一連の問題が発生します。