Webサイトのモバイル対応についてメモ書きしています。
※目次をクリックすると目次の下部にコンテンツが表示されます。
メディアクエリー
●CSSメディアクエリー
・HTML4とCSS2は、メディアに依存するスタイルシートをサポート。
例）プリントデバイス用に特別のスタイルシートを提供している例
<link rel=”stylesheet” media=”print” href=”printer.css”>
・CSS3はメディアクエリーを使って機能を強化
・メディアクエリーはより細かくスタイルシートのラベリングを可能にしてメディアタイプの有用性を拡張する。これによってコンテンツ自身を変更せず、出力デバイスの特定の範囲をカスタマイズする事が出来る。
既存のレイアウトが変更を必要とする際に有用。
・外部スタイルシートのmedia属性内でscreen width, device width, orientationなどに対してメディアクエリーを使用できる。
●スクリーンサイズに応じてスタイルを適用
・”handheld”または320px以下のスクリーンサイズのデバイスにphone.cssを適用する例
<link rel=”stylesheet”
media=”handheld, only screen and (max-device-width: 320px)” href=”phone.css”>
・スクリーンサイズが641px以上800px以下のデバイスに対して適用する場合
<link rel=”stylesheet”
media=”only screen and (min-width: 641px) and (max-width: 800px)” href=”ipad.css”>
・インラインの<style>タグを使用した例
<style>
@media only all and (orientation: portrait) { … }
</style>
●メインとモバイルを分けて定義する例
<link rel=”stylesheet”
media=”all” href=”/static/css/base.min.css” />
<link rel=”stylesheet”
media=”only screen and (max-width: 800px)” href=”/static/css/mobile.min.css” />
●モバイル用のCSSの注意点
・余分な空白、パディングを減らす。スクリーンサイズが小さい場合はスペースは貴重。
・タッチデバイス上では使用されないので:hoverは除去。
・レイアウトをシングルカラム構成に調整。
・サイトのメインのコンテナーdivのbox-shadowを除去。大きなbox-shadowはページパフォーマンスを悪化させる。
・パフォーマンスの影響を考慮し、opacity属性の変更を除去。
・HTML4とCSS2は、メディアに依存するスタイルシートをサポート。
例）プリントデバイス用に特別のスタイルシートを提供している例
<link rel=”stylesheet” media=”print” href=”printer.css”>
・CSS3はメディアクエリーを使って機能を強化
・メディアクエリーはより細かくスタイルシートのラベリングを可能にしてメディアタイプの有用性を拡張する。これによってコンテンツ自身を変更せず、出力デバイスの特定の範囲をカスタマイズする事が出来る。
既存のレイアウトが変更を必要とする際に有用。
・外部スタイルシートのmedia属性内でscreen width, device width, orientationなどに対してメディアクエリーを使用できる。
●スクリーンサイズに応じてスタイルを適用
・”handheld”または320px以下のスクリーンサイズのデバイスにphone.cssを適用する例
<link rel=”stylesheet”
media=”handheld, only screen and (max-device-width: 320px)” href=”phone.css”>
・スクリーンサイズが641px以上800px以下のデバイスに対して適用する場合
<link rel=”stylesheet”
media=”only screen and (min-width: 641px) and (max-width: 800px)” href=”ipad.css”>
・インラインの<style>タグを使用した例
<style>
@media only all and (orientation: portrait) { … }
</style>
●メインとモバイルを分けて定義する例
<link rel=”stylesheet”
media=”all” href=”/static/css/base.min.css” />
<link rel=”stylesheet”
media=”only screen and (max-width: 800px)” href=”/static/css/mobile.min.css” />
●モバイル用のCSSの注意点
・余分な空白、パディングを減らす。スクリーンサイズが小さい場合はスペースは貴重。
・タッチデバイス上では使用されないので:hoverは除去。
・レイアウトをシングルカラム構成に調整。
・サイトのメインのコンテナーdivのbox-shadowを除去。大きなbox-shadowはページパフォーマンスを悪化させる。
・パフォーマンスの影響を考慮し、opacity属性の変更を除去。
viewport
viewportの設定は、ブラウザにデバイススクリーン上にコンテンツをどのようにフィットさせるか指示し、サイトをモバイル用に最適化できる。
●width
・viewportを初期のスケールが1でデバイスの幅に指定した場合
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes”>
・widthは、ピクセル値で指定する事も出来る。
●ズーミング
・user-scalable=yesでズーミングを許可する。
・ズーミングの範囲を設定した例
<meta name=viewport
content=”width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0″>
●スクリーン解像度、ピクセル密度
・スクリーン解像度を指定した例
<meta name=”viewport” content=”target-densitydpi=device-dpi”>
target-densitydpiには、device-dpi, high-dpi, medium-dpi, low-dpiを指定出来る。
・-webkit-device-pixel-ratioのCSSメディアクエリーを使用できる。
・JavaScriptのwindow.devicePixelRatio属性
ネットワーク帯域の節減
●概要
・HTTPリクエストの数を削減すると性能を大幅に向上できる。
・モバイルデバイスはブラウザが対処できる同時接続数に制限があるので、モバイルサイトを余分なリクエストを軽減するとその恩恵をより大きく受ける。
●ネットワーク帯域を節減する方法の例
①iframeを減らす
・iframeは遅い。遅延が発生する。
・サードパーティの共有ウィジェットによって使用される場合あるが、これらのAPIは<script>タグを介してインクルードされiframeを生成するが、この処理で遅延が発生しページのスピードが遅くなる。
②display:none使用時の注意
・モバイルのプロファイルではない場合にHTMLをdisplay:noneを使って隠す場合があるが、その場合でもリクエストを生成し続けている事があるので注意する。
”is_mobile”などのbooleanの変数で、条件を指定してHTMLの対象セクションを省くようにする。
③アプリケーションキャッシュを使用する
④CSS/JS圧縮を使用する
・YUI compressor
⑤CSS画像スプライト
⑥画像の圧縮
・pngcrush
⑦小さい画像はデータURIを使用する。
・Base64エンコードで30%程サイズが増加するがネットワークリクエストは軽減できる。
※データURIスキームとは外部データ無しにウェブページにデータを埋めこむためのURIスキーム
・HTTPリクエストの数を削減すると性能を大幅に向上できる。
・モバイルデバイスはブラウザが対処できる同時接続数に制限があるので、モバイルサイトを余分なリクエストを軽減するとその恩恵をより大きく受ける。
●ネットワーク帯域を節減する方法の例
①iframeを減らす
・iframeは遅い。遅延が発生する。
・サードパーティの共有ウィジェットによって使用される場合あるが、これらのAPIは<script>タグを介してインクルードされiframeを生成するが、この処理で遅延が発生しページのスピードが遅くなる。
②display:none使用時の注意
・モバイルのプロファイルではない場合にHTMLをdisplay:noneを使って隠す場合があるが、その場合でもリクエストを生成し続けている事があるので注意する。
”is_mobile”などのbooleanの変数で、条件を指定してHTMLの対象セクションを省くようにする。
③アプリケーションキャッシュを使用する
④CSS/JS圧縮を使用する
・YUI compressor
⑤CSS画像スプライト
⑥画像の圧縮
・pngcrush
⑦小さい画像はデータURIを使用する。
・Base64エンコードで30%程サイズが増加するがネットワークリクエストは軽減できる。
※データURIスキームとは外部データ無しにウェブページにデータを埋めこむためのURIスキーム
パフォーマンス向上
・すべてのJavaScriptをページの最下部に移動する。
・インラインの<style>タグを除去する。
外部ファイル化することによってキャッシュの効果を最大化できる。
・キャッシュされたDOMのlookupと最小化したDOM操作を行う。
DOMをtouchするたびにブラウザはリフローを行う。リフローはモバイルデバイスにとっては相対的にコストのかかる処理。
・余計なクライアントサイトコードはサーバー側に移行する。
現在のページのナビゲーションスタイリングセットのチェックなど。
例）
・インラインの<style>タグを除去する。
外部ファイル化することによってキャッシュの効果を最大化できる。
・キャッシュされたDOMのlookupと最小化したDOM操作を行う。
DOMをtouchするたびにブラウザはリフローを行う。リフローはモバイルデバイスにとっては相対的にコストのかかる処理。
・余計なクライアントサイトコードはサーバー側に移行する。
現在のページのナビゲーションスタイリングセットのチェックなど。
例）
var lis = document.querySelectorAll('header nav li');
var i = lis.length;
while (i--) {
var a = lis[i].querySelector('a');
var section = a.getAttribute("data-section");
if (new RegExp(section).test(document.location.href)) {
a.className = 'current';
}
}
・fixのwidthで設定した要素はfluidの設定（width:100%、width:auto）に変更する
アドレスバーを自動で隠す
・モバイルブラウザではデスクトップと比べて表示領域が狭いので、スクリーンのトップにあるアドレスバーの占める割合が高くなる。
ページがロードされた後はアドレスバーは邪魔になる。
例）JavaScriptでonloadイベントハンドラーをwindowオブジェクトに設定して、ページを１ピクセル分垂直にスクロールする。
ページがロードされた後はアドレスバーは邪魔になる。
例）JavaScriptでonloadイベントハンドラーをwindowオブジェクトに設定して、ページを１ピクセル分垂直にスクロールする。
{% if is_mobile % }
// Hides mobile browser's address bar when page is done loading.
window.addEventListener('load', function(e) {
setTimeout(function() { window.scrollTo(0, 1); }, 1);
}, false);
{% endif % }
※is_mobileテンプレート変数を使って、モバイルの場合のみ実行している。