スマートフォンサイトを制作する際に設定しておきたいメモ
スマートフォンのサイトを作ったときに最初に設定が必要だと思ったところを忘れないようにメモしておきました。
まずはmetaタグで全体の設定をしました。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.6667, user-scalable=0;">
と設定しました。
content=width=device-width
androidはほぼ幅320pxだが
iphone3G（幅320px）
iphone4（幅640px）
で幅が違うのであらゆるスマートフォンからアクセスしても幅いっぱいに表示されるように設定をしました。
iphoneに有効で横に画面を傾けた時に文字の大きさが変わらないように設定です。
maximum-scale=0.6667
拡大をするかしないかの設定です。これはサイトによってですが、今回は拡大しないサイトですので「0」と設定しましたが、「no」でも同じ意味みたいです。ちなみにこれを
user-scalable=0
にすると手で触って、拡大をしても拡大されたままにならないが触っているときだけ少し膨らむ。user-scalable=2は2倍、３にすると3倍になるようだ。
user-scalable=1
デフォルト表示の設定で今回は拡大もないので等倍に設定してます。
initial-scale=1.0
そしてスタイルシートなどで設定しておくと便利な
-webkit-text-size-adjust: none;
これは、iphoneは画面の表示領域によって文字を自動で拡大縮小をするようで、これをしておけばスタイルシートで設定したフォントサイズがしっかりと反映されるようです。
以上のことをまず最初に決めて設定しておくとあとあとすごく便利でした。あとからでも変更は簡単ですが、スタイルシート変更するときなどに設定しておくと便利です。
ちなみに今回はipod-touchを買って確かめながら進めてました。やはり便利ですね〜iphoneは契約したくないし、エミュレータもありますが、やはり本物で触りながら作るのが一番です！！
