スマフォのゲームで HTML や CSS / Javascript 部分を担当しているわけだけれども、本格的にスマフォに合わせて作るのは初めてで、色々と勉強しながら作っている。その中でどうしてもうまく動かないのが VIEWPORT 。
これは昔、TAMA Network の CSS をいじっている時も試したことがあるんだけど、どうしてもボクの思うように動かない。なんでだろうなーってずっと疑問だった。で、今回も案の定、ボクの思ったとおりにならない。
ただ経験上、iPhone で見ると、VIEWPORT の設定がボクが想定しているよりも倍の大きさになっているように見えるのは知っていた。なんでこんな仕様なんだってずっと疑問だったのだが、それがそもそも仕様だったことに気付いておらず、その動作がサッパリ謎だった。
で、今日、改めて調べて CSS ピクセルってのを知る（ぁ
ボクは今までデバイス ピクセルで組んでいたのである。
CSS ピクセルが生まれたきっかけは、今のスマフォってすごいドットが細かい。そのドットのまま PC のサイトを表示させると、文字が小さくてサッパリ読めない。そこで、例えば iPhone 6 までの iPhone は CSS ピクセルが 2 に設定されている。これは、デバイス ピクセル 2 ドットで CSS ピクセル 1 ドットになる。
そうすることによって、iPhone 6 の画面は 1334 x 750 ドットあるのだが、ウェブを表示する際には 667 x 375 ドットになり、2 倍に拡大されて表示されるのだ。
この仕掛けを知ってようやく VIEWPORT の動作が理解出来たというか、思った通りになるようになったのだが……しかし、全てデバイス ピクセルで作ってしまった……。しかも、Javascript や HTML 上で指定するピクセル数は CSS / デバイスどっちになるんだろうか（デバイス ピクセルで動いているように見える）？
HTML 上で <style></style> 宣言した場合は、その中は CSS ピクセルだった（当然か）。
そんなワケで、CSS 部分はほとんど作り直しに……。
やっぱ PC だけのサイトしか作ってないと、全然ダメだね、というお話。
次回はブラウザ間の色々な違いに苦労した話を……。
串竹でランチ。すっかり店主と顔見知りになってしまった。
ここの揚げ加減が、絶妙である。ボクは「焼く」はだいぶ自信がついてきたんだけど、「揚げる」はまだまだで、こんな風に全体に熱は通ってるけど、少しだけ赤い部分を残すとかどうやっているのか知りたいなぁ。
お肉の状態や厚みによって時間って変わるだろうし……。
柔らかくて、とても食べやすかった。
ごちそうさまでした。
チョコボールの写真は近くのスーパーで保護した「パチパチ レモン味」。
うん、美味しくないね（ぁ
見た目はおんなじなんだけどねぇ（当たり前か
なんかね、失敗したチョコミントって言えばイイのかなぁ。レモンの酸味とチョコの味が一つにまとまってるんだけど、それがレモンと言うよりは後味が酸っぱいだけのチョコみたいな？
