ホームページのカレンダー予定表(自作php)が、タブレット端末で表示すると、画面からはみ出してしまい見苦しいので、CSSで見た目を修正。
ウィンドウのサイズ変更に従い、カレンダーのサイズ(divブロックサイズ)を段階的に縮小するように、@mediaで指定。
ただ、インラインフレーム内に、PHPプログラムを表示する場合は、そのphpプログラムが参照するCSSファイルの@mediaは、外側のウィンドウサイズで判断するのではなく、divブロックサイズの変更によって変えられた、インラインフレームのサイズで判断しているようでした。
その為、呼び出し側用のCSSファイルのほかに、phpプログラム側で参照するCSSファイルを用意して、両方に@mediaを記述して連携させて解決。
・・・これに気づくのに丸一日ほどかかりました。
・・・やっぱ、歳のせいか、頭が固くなってきてるようです。
カレンダー下部の直近予定のダイジェスト表示部分は、大画面では3枚のメモですが、タブレットでは2枚、スマホ縦画面では、1枚に減らして表示するようにしました。
1920×1080ピクセル。
1366×768ピクセル。
1280×800ピクセル。
閲覧目的なら充分な性能。
ノートPCより軽くて持ち運びも楽。
1280×720ピクセル。
(実際は640×360ピクセル相当で表示。)
480×320ピクセル。
「お問い合わせ」のブロックも、「カレンダー」と同じく、ブロックが大きく、タブレット以下では、画面からはみ出して見苦しいので何とかしたいと思っています。
トップのメニュー部分のブロックも、デバイスによっては、右側に余白ができて見苦しいしので、変更したいと思っています。
本当は、Twitter Bootstrap 辺りで、一気にマルチデバイスに対応したHPに大幅改装したいところですが。
とりあえずは、現状のまま、ある程度、見れるレベルにしてからと考えてます。(^^)