この前奮発してAdobe Dreamweaver CS6 Windows版を買ったので、ドリームウィーバーに入っているjQuery Mobile関連のツールを使ってスマホやタブレット用のサイトを試しに作ってみた。
基本的なテンプレも入ってるからスマホ用の知識とか必要なくて簡単に作れたんだけど（Dreamweaverの使い方に慣れる方が面倒・・）、googleのnexus7やドコモのエクスペリアでそのサイトを見るとなぜかサイトの横幅が画面サイズにあってない・・・。スクロールしないとサイトが全部見れず、文字の大きさもやけに小さい。
jQuery Mobileを最新版にしたりいろいろやっても駄目だった。
なので、個人でjQuery Mobileを使ってサイトを作っている人のサンプルサイトを試しにnexus7で見るとちゃんと横幅ピッタリで文字の大きさも決まっていたのでソースを見たらメタタグで
meta name=”viewport”
というものが書かれていた。調べてみたら、このタグで表示するときの幅とかを決めれるらしい。Dreamweaverのモバイルサイト用テンプレには書かれていなかったんだけど、結局
<meta name=”viewport” content=”width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1″>
を入れるだけで取り敢えず解決。各プロパティはそのまんまの意味。
<meta name=”viewport” content=”width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1″>
<title>タイトル</title>
<link rel=”stylesheet”
href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
まとめると、jquery mobileを使う時は以上をヘッダーに入れてあげる（バージョンは新しいのに書き換えた）。
Dreamweaverの最新版を使うとスマホ用サイトが簡単に作れるんだけど、ちょっと細かい所をいじろうとすると知識0だと厳しそう。今のところjquery mobileのことをまったく知らないので、jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)あたりを買って数時間は勉強しておこうと思う。
