スマホ等での閲覧時の問題について
本サイトは,2022/09 から一応のレスポンシブ・デザインとなっています.しかし,スマホ・タブレット等で見た場合,随所にレイアウトの乱れや予期しないレイアウトが生じています.また,いくつかの図で表示動作に問題が見られます.
その問題はスマホ等に限った話ではなく,例えばPCで横長全画面表示した場合にも見られます.
いずれも私のウェブサイト技術の未熟さによるもので,そのうち徐々に改善していきたいとは思っているのですが,『あちらを立てればこちらが立たず』で回避方法が結局どうやっても分からず解決できないという結果もあり得ます.実際そうなっています.
以下では,これらの問題について注記しておきます.繰り返しますが,本サイトの閲覧の推奨環境は,『PCの縦長表示(横900~950ピクセル程度)ブラウザ』です(右図).
これはお分かりのように,私の世代にはもっとも familiar な『A4用紙縦位置』への印刷形態を念頭に置いたものです.本サイトの表示はこの表示サイズに最適化したものとなっています.
スマホ等の『表示幅が 420 ピクセル以下のブラウザ』で本サイトを表示した場合,以下のようになります.
・トップページのスライドショー・アクセスカウンター・サイト内検索は非表示となります.
・トップページの表示テーマ変更のインタ-フェースは,ドロップダウン・メニューから “アコーディオン・メニュー” に変更されます.
・固定されていたヘッダー・フッターは,本文と一緒にスクロールされます.
・表示フォントの大きさが調整されます(完全ではありません).
本サイトでは画像の大きさを『ブラウザ横幅に対する%』で表示しています.したがって,例えば横幅の小さなスマホ縦位置で表示すると,画像の大きさは文字に比較して非常に小さくなってしまいます.
本サイトでは画像やメニューボタン等に『マウス・ホバー時のイフェクト』を多用しています.しかし,スマホ等のタッチスクリーン・ディバイスでは “マウス・カーソル” というものがなく,マウス・ホバーは『その場所へのタッチ』で置き換えられます.したがって,画像等をタッチした時の表示状態を元に戻す(=マウス・リーブ時の動作に相当)には『他の場所を再度タッチする』必要があります.
アーティクルページの多くで,① マウス・ドラッグによる画像スクロールや,② マウス・ホイールによる画像の拡大を Javascript を付けって実現しています.スマホ等では,① は画像を長押ししたあとにドラッグできるようになります.
しかし ② は,スマホ等のタッチ操作に対応するものがあるのかどうか,いまのところ私は把握していません.多分そんなものはなく,Javascript でタッチイベントを使って実装するしかないでしょう.そこまでやる気は湧きません(≒ スキル的に無理・めんどくさい).したがって,この機能はスマホでは使えません.
地質アーティクルの一部に導入した『スライドイン・ジャンプメニュー』をスマホで表示すると,高さがはみ出てしまい,はみ出た部分をタッチ操作できなくなります.回避方法はいくつか考えられるのですが,一長一短があり,いまのところ実装方法を見いだせていません.
上に書いたように,本サイトでは画像の大きさを『ブラウザ横幅に対する%』で表示しています.そのため,表示横幅の大きい横長ディスプレイでブラウザを全画面表示すると,画像が文字の大きさに比較して大きくなってしまいます.その場合,文字が画像に対して回り込む表示になっていると,文字の表示面積が足りなくなって空白が生じ,レイアウトが崩れてしまいます.
その逆の現象として,文字の表示領域が余ってしまい,その空白に本来下にあるべき画像が入り込んでしまう場合もあります.
・この問題は,2013/11 に全画面表示時のフォントサイズを大きくすることによって多少は改善されましたが,解決できたとは言えない状況です.
これらの現象は,『文章が画像とキャプションに対して回り込む』形式となっている本サイトの根本的な問題で,すべての表示環境への対応は現時点では不可能です.