以前、こちらでも紹介させていただきました犬・猫写真でカワイイか投票する「Cute or Not」ですが、これはもともとNintendoDSで遊べるように作っていました。DSブラウザはいまさらな感が否めないですが、上画面に写真・下画面に投票ボタンにして、タッチパネルでポチポチできて、暇つぶしにはもってこいな気がしたからです。
簡単にデザインできるだろう…とはじめは思っていましたが、実はそうでもなく、ちょっと苦戦したところがあったので、メモ程度に残しておきます。
※以下、DSブラウザー特有の“縦長モード”での場合です。
■画面のデザインは1画面：縦176px×横247px
NintendoDS の液晶は1画面192px×256pxになっています。そのうち上画面は上16pxがURL表示、下画面は下16pxが機能表示に利用されています。横幅はスクロールバー用に9px使用されているので、結局1画面の有効範囲は176px×247pxになります。■CSSはhandheld
当初、CSSが反映されず悪戦苦闘しました。<link rel="stylesheet" href="style.css" media="handheld" type="text/css">
とmedia="handheld"を入れるとうまくいきます。
■CSSのfont-sizeは3段階
x-small、small、mediumのみでした。あの小さな画面ではこれくらいでちょうどいいのでしょうね。などど悪戦苦闘している時に見つけた、とても便利なサイトがありましたので最後にご紹介します。（もっと早くに見つけておくべきでした…）
●ニンテンドーDSブラウザーWiki - 開発/html仕様
http://hammerspace.squares.net/DS/wiki.cgi?page=%B3%AB%C8%AF%2Fhtml%BB%C5%CD%CD
●DSブラウザ実験ページ
http://ds.wakufactory.jp/dev/
こちらの“縦画面モード用テンプレ”を利用すると便利です！
そのほかTipsをご存知であればぜひ教えてください。