[ 解決済 ] iPad表示崩れ

[ケンタロウ]

いつもお世話になっております。
Lightning pro を使用しております。

pcではなんの問題もないのですがiPadだと
#サイドバーに設置した連絡先情報
#ヘッダー上部の電話番号とアイコン
#フッター部分
の表示が崩れます。

原因が分からず困っています。
どなたか、直し方分かりましたらご教示願います。

• このトピックはケンタロウが4年、 2ヶ月前に変更しました。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[ケンタロウ]

添付

Attachments:

You must be logged in to view attached files.

[ケンタロウ]

添付2

Attachments:

You must be logged in to view attached files.

[Vektor,Inc]

いまこちらの端末で該当URLを見る限り特に問題ないように思いますが、
なにか既に対処されましたか？
まだ崩れた状態でしょうか？

[ケンタロウ]

返信ありがとうございます。
こちらのiPadではまた崩れたままです。

固定ページ本文も、電話番号やFAX番号が入っている箇所は
表示崩れ起こしてます。
キャッシュと圧縮系のプラグイン切ってみたけど変わりません。

pcやiPhoneは問題無いんですけどね。
iPadだけなんです。
困りました…

[ケンタロウ]

確認したところ
iPadの場合、Safariのみ表示崩れしてます。edgeやchromeは問題ありませんでした。
Safariでも、iPhoneの場合は何の問題も無いのですが。
何とか直す方法無いでしょうか。

[うなこ]

今、サイトのソースを見ましたところ

a[href*="tel:"]{pointer-events:none;display:block;cursor:default;text-decoration:none}

という記述がありまして、iOSのsafariでは自動で電話番号にリンクが貼られるようですので、そのリンクのaタグが、この記述により改行されているようです。

もしかしたらデスクトップ上での電話番号へのリンクを無効にするカスタマイズをされていますか？

• この返信は4年、 1ヶ月前にうなこが編集しました。

[ケンタロウ]

unako様
ありがとうございます。
仰る通り、電話番号のリンクを無効にするカスタマイズしています。

以前はこれでも問題無かったのですが…

カスタマイズを元に戻すしか方法ありませんか？

[うなこ]

このカスタマイズの display:block;部分を display: inline-block; に書き換えれば、うまく表示できるような気がしますが、いかがでしょうか…？

a[href*="tel:"]{pointer-events:none;display:inline-block;cursor:default;text-decoration:none}

追記
Edgeで数字がリンクになるためにこのカスタマイズをされているようでしたら、最新バージョンのEdgeではリンクされなくなっていたと思います。

• この返信は4年、 1ヶ月前にうなこが編集しました。

[ケンタロウ]

Unako様
ご丁寧に有り難う御座います。
お教え頂いた通りの方法で無事解決しました。

以前にも助けて頂いた事があります。
重ね重ね有り難うございます！！

[投稿者]

投稿