iPhoneでのカレンダー表示について

カレンダーの表示において、PCモニターとは異なるiPhoneなどのデバイスでサイトを表示した時、カレンダーの右側が切れて表示される現象があります。

本システムのCSS設定は、サイズや色彩などのデザインはそれぞれで合わせていただくことにしております。そのためPCで利用したとき動作確認ができる程度の設定しかしておりませんので、前述の不具合が発生します。

この件につきまして以前より利用者様から情報をいただいておりますが、現在のところ修正する予定をしておりません。

なお、情報の共有として調整例をいただきましたので、以下に掲載させていただきます。

内容は原文のままです。こちらで動作確認はしておりませんが、皆様の参考としてご確認いただければ幸いです。

複合予約カレンダーの表示対策

こちら私のワードプレス環境だけかもしれまんが念の為に記載をさせて頂きます。
以前、.monthly-calendar のほうでも IPHONE5でカレンダーの日曜日列が見切れる問題がありcss調整したのですが、multiple-calendarでも同様にIPHONE5で見切れてしまった為、以下の記述をcssにすることで解決できました。

/* IPHONE5でカレンダーの日曜日列が見切れる問題解決用追記*/
.multiple-calendar table {
　　　　width:100%;
　　　　table-layout:fixed;
}
.multiple-calendar th,.multiple-calendar td {
　　　　font-size:1em;
}

/* IPHONE5でカレンダーの日曜日列が見切れる問題解決用追記*/

.multiple-calendar table {

　　　　width:100%;

　　　　table-layout:fixed;

}

.multiple-calendar th,.multiple-calendar td {

　　　　font-size:1em;

}

もしもお客様でお困りの方がいらっしゃった場合には方法を共有頂ければと思います。

よろしくお願い致します。

—————————

複合カレンダーでは予約品目の名称文字数によってはスマートフォンの画面表示が崩れて見えてしまいますので、以下のcss記述で調整ができる記述例として共有して頂ければと思います。

よろしくお願い致します。

/*スマートフォン対策*/
@media (max-width: 768px) {
　　　　.calendar-mark .calendar-marking {
　　　　　　　　font-size: xx-large;
　　　　}
}

/*PC対策*/
@media (min-width: 768px) {
　　　　.calendar-mark .calendar-marking {
　　　　　　　　vertical-align: middle;
　　　　　　　　padding-left: 4px;
　　　　}
}

/*スマートフォン対策*/

@media (max-width: 768px) {

　　　　.calendar-mark .calendar-marking {

　　　　　　　　font-size: xx-large;

　　　　}

/*PC対策*/

@media (min-width: 768px) {

　　　　.calendar-mark .calendar-marking {

　　　　　　　　vertical-align: middle;

　　　　　　　　padding-left: 4px;

　　　　}

—————————

追補) 閉じタグ「</tr>」の出力不具合

カレンダー表示はtableタグを利用しておりますが、プログラムの不具合によって最終行の閉じタグ「</tr>」が未出力になっております(Ver.1.4.1を含みます)。

ブラウザーにより未出力のタグを補完して解釈、正常に動作することが多いですが、iPhoneにおいてはこの未出力タグの影響で、テーブル表示右側が画面外になっているようです。

Ver.1.4.1では対応しておりませんので、プログラム修正して操作をお試しください。修正箇所は次の通りです。なおPHPプログラムを編集するため、エラーがあると画面が白く表示されたり、エラーメッセージが表示される事があります。

作業はバックアップを用意して進めてくださるようお願いします。

修正ファイル：mtssb-front.php
修正箇所：182行「?>」と183行「</table>」の間に「</tr>」行を挿入

(2019-12-24)