スマートフォンやタブレットでEventSyncの予約フォームや管理画面が正しく表示・操作できない場合の対処法を解説します。
モバイル表示の一般的な問題
モバイル端末でフォームや管理画面が正しく表示されない場合、まずブラウザのキャッシュをクリアしてから再度アクセスしてください。古いキャッシュが残っていると、デザインの更新が反映されないことがあります。
ページが横にはみ出したり、要素が重なって表示されたりする場合は、ビューポートの設定に問題があります。HTMLの`<head>`タグ内に`<meta name="viewport" content="width=device-width, initial-scale=1.0">`が設定されているかを確認してください。カスタムテンプレートを使用している場合は、この設定が含まれているかを確認してください。
フォームの入力フィールドが小さくてタップしにくい場合は、CSSで入力フィールドの高さを44px以上に設定することをお勧めします。これはAppleとGoogleのUIガイドラインで推奨されているタップターゲットの最小サイズです。
iOSとAndroid固有の問題
iOS（Safari）固有の問題として、テキストフィールドをタップした際に画面が意図せずズームされることがあります。これはフォントサイズが16px未満の入力フィールドで発生します。入力フィールドのフォントサイズを16px以上に設定することで解消できます。
Android（Chrome）でのみ発生する問題として、`position: fixed`要素がソフトキーボード表示時に正しく表示されないケースがあります。フォームの送信ボタンを固定ポジションで配置している場合は、代わりにフォームの末尾に配置するよう変更してください。
モバイルSafariでは、`<select>`要素が独自のドロップダウンUIで表示されます。カスタムスタイリングされたセレクトボックスがモバイルで使いにくい場合は、ネイティブの`<select>`要素を活用するか、タップフレンドリーなカスタムUIコンポーネントに変更することを検討してください。
モバイルでの管理画面の使用
EventSyncの管理画面はデスクトップ環境を主対象として設計されていますが、モバイルブラウザからも基本的な操作が可能です。複雑な設定変更はデスクトップ環境で行うことを推奨しますが、予約の確認やキャンセル処理などの緊急対応はモバイルからも実施できます。
管理画面をモバイルで使用する際は、ブラウザの「デスクトップ用サイトを表示」オプションをオフにし、レスポンシブ表示で操作してください。また、Safariの「リーダーモード」が自動的に有効になる場合は解除してください。
モバイルアプリについては、今後のアップデートで専用のiOS/Androidアプリを提供予定です。リリース情報はEventSyncのニュースレターおよび管理画面のお知らせ欄でご確認ください。