ありんこ書房

今日から使える創作ノウハウ。時々エッセイ。ゴシックカルチャー。

特定のAndroid端末だとSTINGER6+Simplester Ver.2でもデザインが崩れるという話

   

スポンサードリンク

ありんこ書房開設初、お客様からのクレームによるブログネタでございます。まぁクレーム無視するんですけどね。
御機嫌よう、蟻坂(@4risaka)です。

STINGERでも表示がおかしくなる!?

本記事を書くことになったきっかけは、読者のある人からの意見というか報告なのですが、どうも一部のAndroid端末とブラウザの組み合わせでブログの外観がおかしくなるという話だそうです。

しかしですね、弊ブログは最高のSEO向けテンプレートSTINGER6をベースに、Simplester Ver.2を改造したものを組み合わせて作っておりますので、レスポンシブ対応を含めるデザイン性には問題はないと考えておりまして、
「まさかSTINGER+Simplesterが?」とちょっと驚いたのですが実際そうだったので共有しておこうと思います。

ちなみに本記事ですがその対処方法について述べたものではありませんので、あしからず。
というのも現象を確認したAndroid端末が若干ニッチなので、様子見しても良いと判断したからです。

一部のAndroid端末で表示が崩れる

百聞は一見にしかず、いくつかの例を添付して淡々と共有しましょう。

HTC J Butterfly HTL21の場合

以下の画像を御覧ください。
corrupt1
わーお、これはひどい。というわけで見事に表示が崩壊するパターンが存在するようです。

読者の方から詳細なスペック情報を伺ったところ、以下の端末とブラウザの組み合わせで再現するようです。

  • HTC J Butterfly HTL21(5.0inch, FULL HD)
  • Android 標準ブラウザ
  • Android 4.1.1
  • 縦画面表示

なかなかとんでもない崩壊をします。auから2012年に出た機種ですね。

現象としては、メニューやコンテナはスマホのそれになっているのですが、見出しや罫線の回り込みが正常に表示されていない(スマホなら下に出るはず)という感じです。なんだかfloatプロパティがうまく動いてません。

ASUS TF103cの場合

お次はASUS TF103cの場合。「ASUS Pad」として知られる割安タブレットです。これまた中々持ってる人が居無さそうな端末です。
corrupt2
メニューが限界まで縮こまりつつもデスクトップ向けの表示になっています。となると必然的に記事のコンテナもデスクトップ向け表示(アイキャッチが右、文字が左)になるのですが、縮こまってるので若干はみ出ています。

  • ASUS TF103(10.1inch 1280×700)c
  • Android 標準ブラウザ
  • Android 4.4.2
  • 縦画面表示

このパターンの崩壊、実はInternet Explorer 11で確認しており、でもまぁ「IEなんか使うんじゃねぇ」のロック精神(?)で無視していたのですが、Androidのタブレットでも起こるようです。

他のSTINGER適用ブログでも起こるらしい

で、自分がCSSの改造をミスったわけじゃないことを検証するために、STINGER PLUS+を使用している弊ブログとは別のブログでの表示確認を、その読者の方に実施してもらいました。

他サイトなので画面キャプチャの表示は省略しますが、ASUS TF103cのケースのように「若干文字がはみ出る」という崩壊の仕方、微妙にレスポンシブが働かずにタブレットビューに変化しない(デスクトップ表示が縮んだ状態)になることを確認しました。

このほか、Androidはブラウザが自由なので、ブラウザアプリ「Sleipnir Mobile」を使った場合どうなるのかも教えていただきましたが、以下のように綺麗に表示されることを確認しています。
corrupt3

従いまして、以下のことが考察できます。

  • Simplester Ver.2のCSSにバグが有るわけではない
  • STINGER PLUS+でも発生するので、元になっているSTINGERの骨組みが怪しいと思われる
  • というかAndroid標準ブラウザのレンダリングエンジンの挙動が怪しい
  • 画面解像度はHTC J Butterflyのほうが大きいがこっちのほうが派手に壊れるので、解像度は直接影響しなさそう

……というか、HTC J Butterflyの壊れ方を見るにfloatプロパティが動作していないという問題がまずあって、ASUS Padの場合スマホ表示モードになってほしいけどなってくれてないという別の問題が発生しているように見えます。

ということで、本現象はAndroidの標準ブラウザで特定解像度のときに表示が崩れるという疑惑かもしれません。

それでも様子見する理由

ひょっとしたらAndroidスマホをお使いの読者の方からしたらヒドイ閲覧性になっている可能性が高い、ということがわかりました。

が、今のところ以下の理由で修正は見送っています。ひとことで言うと怠慢でもあるのですが。

  • 来訪者の9割がパソコンかiPhoneなので、対応コストに釣り合わない
  • Android端末持ってないので検証できない
  • 読者からの報告がない
  • めんどくさい

1つめと3つめは明らかに相関性があって、そりゃみんなiPhoneなんだから報告しないわなという話ですし、だいいち、変な表示だったら皆さん黙ってページ閉じるだけですよね。わざわざ報告しませんよね。

ということは、もしかしたら機会損失がいくらかあるのかもしれないので直すべきかもしれませんが、日本語でブログを書くと国内市場の関係でどうしてもiPhoneユーザーだらけになるみたいなので一旦保留です。
ここで見捨てたAndroidユーザーに凄いインフルエンサーがいたら、わたしの負けです(Android標準ブラウザしか使わないインフルエンサーってなんだって個人的に思ったりもしますが)。

2つめについてですが、「レスポンシブデザインの検証ツール」であればGoogle Chromeを使えば解決なんですがブラウザのレンダリングエンジン依存となるとどうしようもありません。なんか買えってことでしょうか。
アプリ開発でもするなら意義がありそうなんですが、開設半年未満の個人ブログなのでこちらも一旦保留です。客足が伸び悩んだら検討するくらいのゆったりさで良いと考えます。

というぐあいに御託を並べてますが結局4番めのめんどくさいが全てです。こういう時だけ個人ブログのユルさでなんとか切り抜けようと思います。あしからず。

まとめ

という具合に、STINGERほどの実力派テーマでもデザインが崩壊するパターンがあるよ、という話でした。

調べてみると、どうもWeb界隈ではAndroid標準ブラウザはちょっと問題がある子のようです。

Android端末のデフォルトブラウザでスマホサイトが正しく表示されない【モバイル対応】 | cityJumperWEB.com
滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話 – Qiita

「スマホ界のIE6」という表現は言い得て妙ですね。そういうことなら遠慮無くサポート切っちゃっても良い気がします。
また、IE6の時と異なり日本国内はiPhoneが圧倒的多数派なので、その辺のブラウザ(というかSafari)に対応すればとりあえず窮地は脱することができます。そのような割り切りもありだと思います。先程申し上げましたように対応コストが高く付きますので。

Webの表示確認は暗黒です。個人サイトを運営されている皆様は、アクセス解析などを根拠に対応・非対応を明確に打っていくのが良いでしょう。

 - Web制作, 創作 , , , ,