スマホ等での閲覧時の問題について

 本サイトは,2022/09 から一応のレスポンシブ・デザインとなっています.しかし,スマホで見た場合,随所にレイアウトの乱れや予期しないレイアウトが生じています.また,いくつかの図で表示動作に問題が見られます.
 その問題はスマホに限った話ではなく,例えばPCで横長全画面表示した場合にも見られます.

 いずれも私のウェブサイト技術の未熟さによるもので,そのうち徐々に改善していきたいとは思っているのですが,回避方法が結局どうやっても分からないという結果もあり得ます.実際そうなっています.

 以下では,これらの問題について注記しておきます.繰り返しますが,本サイトの閲覧の推奨環境は,『PCの縦長表示(横900~950ピクセル程度)ブラウザ』です.これはお分かりのように,私の世代にはもっとも familiar な『A4用紙縦位置』への印刷形態を念頭に置いたものです.これ以外の表示環境では正直言って,問題だらけです.


スマホ等での表示

スマホ等の『表示幅が 420 ピクセル以下のブラウザ』で本サイトを表示した場合,以下のようになります.


・トップページのスライドショー・アクセスカウンター・サイト内検索は非表示となります.

・トップページの表示テーマ変更のインタ-フェースは,ドロップダウン・メニューから “アコーディオン・メニュー” に変更されます.

・固定されていたヘッダー・フッターは,本文と一緒にスクロールされます.

・表示フォントの大きさが調整されます(完全ではありません).


表示の制約

本サイトでは画像の大きさを『ブラウザ横幅に対する%』で表示しています.したがって,横幅の小さなスマホ縦位置で表示すると,画像の大きさは文字に比較して非常に小さくなってしまいます.


動作の制約

本サイトでは画像やメニューボタン等に『マウス・ホバー時のイフェクト』を多用しています.しかし,スマホ等のタッチスクリーン・ディバイスでは “マウス・カーソル” というものがなく,マウス・ホバーは『その場所へのタッチ』で置き換えられます.したがって,画像等をタッチした時の表示状態を元に戻す(=マウス・リーブ時の動作に相当)には『他の場所を再度タッチする』必要があります.

地質アーティクルの一部に導入した『スライドイン・ジャンプメニュー』をスマホで表示すると,高さがはみ出てしまい,はみ出た部分をタッチ操作できなくなります.回避方法はいくつか考えられるのですが,一長一短があり,いまのところ実装方法を見いだせていません.


PCの横長全画面表示での制約

上に書いたように,本サイトでは画像の大きさを『ブラウザ横幅に対する%』で表示しています.そのため,表示横幅の大きい横長ディスプレイでブラウザを全画面表示すると,画像が文字の大きさに比較して大きくなってしまいます.その場合,文字が画像に対して回り込む表示になっていると,文字の表示面積が足りなくなって空白が生じ,レイアウトが崩れてしまいます.

その逆の現象として,文字の表示領域が余ってしまい,その空白に本来下にあるべき画像が入り込んでしまう場合もあります.


・この問題は,2013/11 に全画面表示時のフォントサイズを大きくすることによって多少は改善されましたが,解決できたとは言えない状況です.


これらの現象は,『文章が画像とキャプションに対して回り込む』形式となっている本サイトの根本的な問題で,すべての表示環境への対応は現時点では不可能です.



トップページへ戻る