saikoの日記帳

about

iPhone7でLINEアイコンが表示されなくて死にかけた話

ほんとゴミ

どういう現象だよ

つい最近全く面白くない事実が判明。
それにハマって2時間無駄にした思い出(2日前)を語ります。

とある案件で1ページの特設サイトを作ることに。
内容は特にこれといって特徴のない、ふっつーの特設ページ。
モーダルウィンドウ仕込むのを除いたらただの静的HTML。

そこでですね、LINEのアイコンにしてやられたというか、なんというか。
単純にSNS共有ボタン並べて呟けたりしようとしただけなんですよ。
こんな感じで。



このaタグでそれぞれのSNSを設定するやつ。
そんでもってmetaタグでOGP仕込むっての。

まあぶっちゃけこの時点で「ul liで囲めよ」とかあるでしょうけど、それは置いておき。
iOSとかAndroidとかタブレットで確認したんですよ。
ウチにある端末全部で問題なく動いたので納品したんですね。
そしたらなんと、

「iPhone7でLINEのアイコンだけ表示されないんですよね」

という衝撃的な一言が。
は?となってたまたま先輩が持ってたiPhone7 Plusで確認。
問題なく写る。

どうやら本当に「iPhone7でだけ見えない」という現象が起きているとのこと。
なんでじゃなんでじゃと色々と探ってみまして。
同じようなことをしている案件のサイトを見せてみました。
そしたらそこのサイトのSNSアイコンは全部見えているそうで。

そこの構造は

  • ここにさっきのaタグ構造

ってなってたんですよね。
それを真似てやってみたんですよ。

「 見 れ る よ う に な り ま し た」

は~~~~~~~~~???
なにその不思議現象~~~~~~~~???

っていうことがありまして。
結局の所何が悪かったのかは謎のままです。
考えられる原因としては、

①iPhone7ではliに囲まれていないaタグを使ったLINEアイコンが表示されない(?)
②今回LINEアイコンだけ微妙に大きかったせい
③使っていたiPhone7が何か悪さした

ってとこでしょうか。
いや今挙げた全部ありえねーと思ってますが。

更に何が怖いって、そのiPhone7のChromeでは普通に見れたってこと。
つまりSafariでだけ起きていた現象みたいです。
なにそれ~~~~!!!!!!

できる対策としては単純で、リスト構造にするってだけです。
それで写るようになったので、多分それが最善策となります。
いやそれ以外に何も考えられないです。
なんだったんでしょうね。

まー普通はリスト構造にするんですけどね、こういうの。
なんでそうしなかったのでしょうね、当時のぼくは。
先週のぼくですけど。

それでは今日はここらでサヨウナラー

page-top

%d人のブロガーが「いいね」をつけました。