マルチデバイスサイトに関して勉強したこと、ちょっとした設定方法等を備忘としてメモ書きしてまとめています。
※目次をクリックすると目次の下部にコンテンツが表示されます。
Bootstrap3を使ってインラインフォームを作成
※参考サイト
はじめてのマルチデバイス サイト | Web Fundamentals – Google Developers
●フォーム作成時の注意点
・すべてのフォームにラベルとプレースホルダを設定する。
ユーザー補助ツールがフォームの構造を認識しやすくなる。
・name属性は、フォームの値をサーバーに送信するだけでなく、ブラウザにフォームへの自動入力の方法についてのヒントを与える役割も持っている。
・ユーザーが携帯端末で素早く簡単にコンテンツを入力できるよう、適切な入力タイプを設定する。たとえば、電話番号を入力する際には、ダイヤルパッドが表示されるようにする。
●Bootstrap3で書換え
参考サイトのサンプルをBootstrap3のインラインフォームのクラスを使って書き換えてみました。
はじめてのマルチデバイス サイト | Web Fundamentals – Google Developers
●フォーム作成時の注意点
・すべてのフォームにラベルとプレースホルダを設定する。
ユーザー補助ツールがフォームの構造を認識しやすくなる。
・name属性は、フォームの値をサーバーに送信するだけでなく、ブラウザにフォームへの自動入力の方法についてのヒントを与える役割も持っている。
・ユーザーが携帯端末で素早く簡単にコンテンツを入力できるよう、適切な入力タイプを設定する。たとえば、電話番号を入力する際には、ダイヤルパッドが表示されるようにする。
●Bootstrap3で書換え
参考サイトのサンプルをBootstrap3のインラインフォームのクラスを使って書き換えてみました。
<form class="form-inline" method="post" id="register">
<h2>Register for the launch</h2>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" id="name"
placeholder="Thomas A Anderson" required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" name="email" id="email"
placeholder="neo@example.com" required>
</div>
<div class="form-group">
<label for="tel">Telephone</label>
<input type="tel" class="form-control" name="tel" id="tel"
placeholder="(555) 555 5555" required>
</div>
<button type="submit" class="btn btn-default">Sign up</button>
</form>
ビューポートを設定
（１）ビューポートの必要性
・ビューポートは、マルチデバイス対応サイトの構築に必要な最重要コンポーネント。
ビューポートがないと、サイトは携帯端末上で正しく表示されない。
・モバイル ブラウザではページをパソコンの画面幅（通常はおよそ 980px、ただしデバイスにより異なる）でレンダリングしたうえで、フォント サイズを大きくしたりコンテンツを画面に合わせてスケーリングすることで外観の向上を試みる。その結果、ユーザーにとっては、フォント サイズに一貫性がないように見えたり、コンテンツの表示や操作のためにダブルタップやピンチによるズーム操作が必要になったりする。
・ビューポートは、画面に収めるためにページをスケーリングする必要があることをブラウザに通知。
・デフォルトとして、以下の設定を推奨。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
（２）各要素について
１）meta name=”viewport”
スマートフォン向けの機能。文書の表示領域を設定
２）content=””
文書情報の内容。
３）device-width
・表示領域を端末画面の幅に合わせる
画面の幅をデバイス非依存ピクセルで合わせるようページに指示が与えられる。これにより、小さい携帯端末と大きいパソコン用モニターのどちらでレンダリングするかを問わず、さまざまな画面サイズに合わせてページのコンテンツをリフローすることができる。
４）initial-scale
・表示領域の初期のズーム倍率
initial-scale=1 を追加すると、デバイスの向きに関係なく CSS ピクセルとデバイス非依存ピクセルとの間に 1:1 の関係を確立するようブラウザに指示が与えられる。これにより、横向きにした場合にページ幅全体を利用できるようになる。
５）user-scalable、minimum-scale、maximum-scale
・これらの属性を設定するとユーザーがビューポートをズームできなくなる場合があるため、ユーザー補助関連の問題が生じる可能性がある。
・モバイルデバイス上でズームの操作を無効にするには、”user-scalable=no”を指定する。
ズーミングを無効にするとユーザーはスクロールすることのみ可能となる。
（３）コンテンツのサイズをビューポートに合わせる
・ビューポートよりも広い幅で表示される画像があると、ビューポートで横方向へのスクロールが発生する。ユーザーが横方向にスクロールしなくて済むよう、このコンテンツをビューポートの幅に収まるよう調整することが必要。
・CSS でページ要素の width に大きな絶対値を設定すると幅の狭い端末（iPhone などの、幅が 320 CSS ピクセルの端末）のビューポートでは div が広くなりすぎてしまう。
代わりに、width: 100% などの相対的な幅の値を使用する。
・同様に、位置指定に大きな絶対値を使用すると、小さい画面では要素がビューポートの外に出てしまう可能性があるため注意が必要。