instagramアプリ内でのブラウザ表示

Question

質問を失礼いたします。
instagram内でリンクにアクセスした際、
safariなどのブラウザではなく、まずinstagram内のブラウザでページ表示されますが、
そちらでホームページの表示崩れが発生し困っております。

端末はiPhoneです。
症状発生は、iOS 14.4.2にアップロードしてからです。
twitterでは正常に表示されます。

特にホームページ自体の設計にエラーはございません。
一部、safari 12 で GoogleのreCAPTCHA v3 導入がらみのエラー表示はありますが、GSPは使用しておりませんので表示不具合に関連はないと考えております。

今後のために、原因を知りたいと考えております。

・instagramやその他のSNS上で開かれるブラウザは一体なんのために存在するのでしょうか。
・上記をターゲットにした専用ページを作成することは可能でしょうか。

instagram APIに関する知識が乏しく、勉強する糸口も見つからない状態で、大変お恥ずかしいのですが、ご教授をよろしくお願いいたします。

[ 主な症状 ]
スマートフォン表示でパララックス効果を付与するjqueryライブラリ「universal-parallax.js」でのパララックス箇所の表示ずれ。（universal-parallax.jsの旧コードは修正し採用。）

パララックス効果を付与した画像が下部にずれ込み、画像が見切れております。パララックス効果自体は発動。

Answer 1

・instagramやその他のSNS上で開かれるブラウザは一体なんのために存在するのでしょうか。

中の人ではないので推測ですが...

別のアプリに遷移すれば、元のアプリに戻らずに離脱率が高くなると考えられますので、アプリ内で処理することによるユーザーの囲い込みでしょうね。

・上記をターゲットにした専用ページを作成することは可能でしょうか。

アクセスしてきたWebブラウザを判別して、表示を切り替えたり、処理を分けるなどすれば可能です。

メジャーなSNS アプリの場合、UserAgent で判断できるのではないかと思います。

Comments

[signon]

CHERRY 様
的確なご返答を誠に有難うございます。

UserAgentで判別することは思いつきませんでした。
SNSアプリのWEBページに対する挙動や、今後の進展などを予測し、一から学んで行きたいと思います。

本当に有難う御座いました。