Amazon.co.jpを利用してニンテンドー DS ブラウザーを購入しました。

少し前にニンテンドー DS を購入して脳トレ、マリオと一通りゲームを楽しんだは良いものの、それ以降まったく触っていない状態が続いていました。

そこで、改めてニンテンドー DS を活用するために、専用のブラウザを購入するにいたった訳です。

DS ブラウザーが届くなり早速、ネットを開始する。
ブラウジング方法は2種類あり、2画面モードと縦長モードがあります。（詳しい説明はこちら）

2画面モード

基本的にはOperaの8.5をベースとしているのでCSSの対応を含めブラウジングに大きな問題はありません。特に2画面モードは下画面に縮小（PC版Operaの縮小と同じように）、上画面に拡大といった感じでCSSで制御した「見た目」通りにほぼブラウジングしてくれます。

縦長モード

縦長モードでむりやり縦長（横スクロールが出ないように？）制御するので、画像も縮小表示されたり、CSSの横幅の設定なんかも効かなくなります。
つまりは2画面モードと違いPCと同じように「見た目」を制御するのは少し難しいです。

縦長モードを前提に専用のCSSを作る

2画面モードは見た目は僕の意図どおり表示してくれて非常にありがたいのですが、何分使いにくさが尋常ではない。なので縦長モードでの閲覧を前提に、PCとニンテンドー DS とでCSSを切り分けてみます。

PCとは別にhandheld.cssを用意し、media属性をhandheldに設定し読み込みます。
DS ブラウザーの縦長モードの最大widthは240pxなのでそれに合わせたレイアウトに変更しました。

実際はこんな感じに表示されるはずです。

PCのように横幅が大きくないので以上にデカイ広告などは非表示にして対応しています。
また、当然のように本文、ナビゲーションを左右2カラムにするのは横幅的に厳しいので上下で対応しています。

その他細かい余白を調整して出来上がりです。
これで当サイトをDSブラウザー で閲覧してもストレスなく見ることが出来ます。
（10月6日現在トップページのみ）