如何调整 instagram 应用内浏览器的 html/css 布局？

Posted 2023-03-31

【中文标题】如何调整 instagram 应用内浏览器的 html/css 布局？

【英文标题】：How to adjust html/css layout for instagram in-app browser?

【发布时间】：2016-12-02 06:38:44

【问题描述】：

我在谷歌上搜索了很多，但没有找到任何关于我的问题的线索。我有一个很小的网站（仅限 html/css），在移动 Chrome 上看起来不错。但在 android 5.0 上的 Instagram 应用内浏览器上，填充出现问题。有没有办法通过媒体查询或前缀来处理应用内浏览器？到目前为止，我什么也没发现。希望这里有人可以帮助我。提前致谢。

附：对不起我的英语不好，我正在努力。

【参考方案1】：

您可以使用 javascript 检测包含 Instagram 的用户代理，并针对该情况请求特定的 CSS。

示例代码：

<script>
var isInstagram = navigator.userAgent.match(/instagram/i);
if (isInstagram) 
  var head = document.querySelector('head');
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'your-file-with-instagram-fixes.css';
  head.appendChild(link);

</script>