Androidでのfacebookアプリ内ブラウザでのレイアウト崩れについて

Question

ご覧いただきありがとうございます。
ウェブサイトを制作しており、facebookアプリ内ブラウザの表示を制御できずに困っています。

CSSはリセットの後かなり細かく書いており、chrome,firefox,safari,IEでの表示は正確です。

が、facebookに投稿したリンクをクリックしてfacebookアプリ内でブラウジングすると驚く程崩れていました。

調べ方が下手なのか、facebookアプリ内ブラウザでのレイアウト崩れへの対処を見つけることができませんでした。
参考になるサイトや記事をご存知の方がいらっしゃればお教え頂けないでしょうか。

宜しくお願い致します。

Answer 1

私も同じ現象であたまをかかえています。
私はIOSです。

CSSがうまく効かないんですよね。。。
この後解決しましたでしょうか？

Comments

[退会済みユーザー]

こんにちは。間違えてベストアンサーにしてしまいました。失礼しました。

本件、私は解決しました。
原因はandroidのデフォルトブラウザ(chromeではない)で効かないcssを使っていたことでした。

レスポンシブ対応のため、heightの指定に一部単位「vw」を使っていたのですが、android標準ブラウザにおいてはOSがandroid4.4以降のみの対応のようでした。
http://on-ze.com/archives/1310

苦肉の策ですが、
height: 40px;
height: 12.5vw;
のようにheightを2つ書きました。vw非対応の場合は40pxが適用される。vw対応の場合は12.5vwが適用される。

iOSの場合でもfacebook内ブラウザは上記と同じ原因かもしれません。あまり使わないcss指定など使用していればみてみてください。

[iiiisksjsj]

そうなんですね！

ご丁寧に回答いただきありがとうございます。
対応してないCSSの可能性があるかもしれませんね。

確認してみます。
ありがとうございます。

Answer 2

回答がついていないようなので、ぼくでは明確には答えられていませんが、回答します。

Androidの他のアプリでは表示が崩れていないでしょうか？

AndroidのアプリはWebViewというブラウザコンポーネントを使っているので、他のアプリでも表示が崩れるようであれば、WebViewを使って表示の崩れが確認できるはずです。

がfacebookアプリが自前でブラウザを実装している場合はこの限りではありません。貴サイトへのURLをクリックするとデフォルトブラウザを開くような仕組みがあれば悩みを減らせるかもしれませんね。

参考: 【Android Studio】Webviewを使った簡単なアプリ作成！

Comments

[退会済みユーザー]

ありがとうございます。
他のアプリでは崩れませんし、知人複数名に確認したところandroidでも崩れない場合もございます。

最後に書いて頂いた、URLをクリックするとデフォルトブラウザを開かせる仕組みはなにかご存知でしょうか。
ユーザー側が自身のアプリの設定で変えることはできそうですが、サイト側から指示は出せるのでしょうか。