2014年01月22日

ブートストラップ3の特徴(1)モバイル優先、viewportの指定方法

ブートストラップ3の特徴であるMobil firstについて確認しました。
・ブートストラップ2ではフレームワークにモバイルによる使用に適したスタイルを追加したが、ブートストラップ3では最初からモバイルに適したスタイルを作ることを前提に作り直した。

・モバイル優先のスタイルは、複数のファイルに分離するのではなく、全ライブラリに導入した。

・適切なレンダリングとタッチズーミングを保証する為に<head>タグにviewportメタタグを追加している。

<meta name="viewport" content="width=device-width, initial-scale=1.0">


※各要素について

・meta name="viewport"
スマートフォン向けの機能。文書の表示領域を設定

・content=""
文書情報の内容

・width=
表示領域の幅
 device-width 端末画面の幅に合わせる
 initial-scale 初期のズーム倍率

・モバイル出刃入る上でズームの操作を無効にするには、"user-scalable=no"を指定する。

ズーミングを無効にするとユーザーはスクロールすることのみ可能となる。

下記については推奨しない。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
posted by ホノデザイン at 10:35| Comment(0) | ブートストラップ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: