wordpressのtablepressプラグインの表示崩れ

Question

ワードプレスでテーブルプレスを用いた表を作成したところモバイル（実機）での表示が不自然になってしまいます。
ほかのプラグインやcssの修正を素人ながらに行ったのですが、解決できませんでした。
テーブルの表示をキレイにする方法＆表示崩れの原因など改善に役立つ情報を些細なことでも知見のある方たちからご教示いただけたらと思います。

使用しているプラグイン
tablepress(テーブル作成プラグイン)
footable(モバイル表示になるとテーブルを折りたたみ見やすくしてくれるプラグイン)

現状
PCでモバイル表示を疑似的に作り出すとfootableプラグインが有効になりキレイに仕上がっている。
iphoneの実機で見た場合はテーブルの表示が重なってしまい見づらく、footableが有効になっていない。

目的
iphoneなどの実機で見たときにfootableが有効になり、重なっていない状態にしたい。

3週間以上自身で修正を試みたのですが改善できませんでした。
また過去に同様の質問をしてみたのですが解決につながる回答が得られませんでしたので、再投稿になってしまいますが質問させていただきました。よろしくお願いいたします。

Comments

[m.ts10806]

念のため前回質問のURLも貼っておいてください。設定など解決に必要となりそうな情報もありますので。

[Spin]

確かにそうですね！！親身に対応なさっていただき感謝いたします。

Answer 1

引き続き前回の質問を踏まえて色々調べていて試してもらいたいことなんですが、
footableの設定でtable breakpointとphone breakpointの設定を変更してみてはどうでしょうか？
横幅により切り替えポイントが決めていると思うのですが、phoneの方が320となっていたと思いますが、少し狭すぎる気がします。
320のものも少なくはないと思いますが、最近の機種はだいぶ広くなってきています。

• 2016年最新版 iPhone・Androidスマホ 機種別画面サイズ、解像度、縦横比のまとめ
• スマホの画面解像度シェアを調べてみた（2017年1月版）

ある機種狙い撃ちというのは難しいかもしれませんが、phoneの値を広くすることで「phone」として解釈させるための枠を広くするという意味合いに思います。

Comments

[Spin]

お世話になっております。
結論から申し上げますと、残念ながらfootableのbreakpointを変更してもiphoneなどの実機で表示の崩れが改善されませんでした。

最近の機種はだいぶ広くなってきていたのですね！参考になるURLを送っていただきありがとうございます。

[m.ts10806]

なるほど。了解です。解像度の拡大により見え方がだいぶ違ってきているのでもしかしたらとは思ったのですが、、、中々力になれずすみません。

[m.ts10806]

あとはiPhone,スマートフォンでJavaScript等にエラーが出ていないか確かめてみるしかないですね。
https://liginc.co.jp/web/tool/mac-iphone/77988
http://ohsexybaby.com/web/953/

[Spin]

とんでもございません。
様々なご提案をいただいており助かっております。
素人の自分にはどうも本件は難しいようでここでも明確な回答をいただくことが難しいトラブルと感じました。
今週いっぱいここで解決できる可能性を信じて代行業者の方に依頼することも検討いたします。
JavaScriptのエラーチェックは少し高度なので、自分にできるか不安ですがトライしてみます！！

[Spin]

お伺いしたいことがございます。
https://www.nishi2002.com/15734.html
上記サイトにてモバイル表示の場合項目を非表示にする記述がありましたがぼくのサイトでは反映されませんでした。
/* 不要な列を消す */
@media (max-width: 640px) {
〜略
このメディアの部分を読み込まない場合に考えられる原因をご存知でしたらご教示下さい。

[m.ts10806]

先ほどサイトを見た限りでは、本質問は解決済みのように思いますが・・・
コメントいただいた件は別件に思いますので、別途詳細と共に質問を立てられた方が良いかと思います。

[Spin]

確認ありがとうございます。
画像サイズの指定を変更した結果現状の状態になりました。
本質問の目的はモバイル端末（実機）で閲覧した際にfootableが正常に有効化されることにありますので先ほど記載した
@media (max-width: 640px) {
〜略
を有効にできればfootableも正常に有効化されるのでは？
footableも同じような記述で動作しているのではないか？
という考えに至ったからになります。

実は現状のテーブルではヘッダーの文字を3文字以上にすると崩れてしまったり横にたくさんのテーブルを並べることが不可能だったりと現状のものは応急処置にしかなっていない状況です。

上記の記述が別件であれば質問を立て直す予定ですが、関連した内容に感じてしまっております。matsu1006さんから見ていかがでしょうか。