如何调整HTML/CSS布局以适应Instagram内置浏览器？

Question

我一直在谷歌搜寻，但没有找到解决我的问题的线索。我有一个很小的网站（仅限html/css），在移动版Chrome上看起来不错。但是，在Android 5.0上使用Instagram内置浏览器时，填充出了点问题。是否有任何方法通过媒体查询或前缀处理内置浏览器？到目前为止，我什么都没发现。希望这里有人能帮助我。先谢谢了。

附言：对于我的糟糕英语，我正在努力改善。

- Aleksandr Mikheev

Answer 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>

- Tom Roggero

Answer 2

有点晚了，但我刚刚遇到了一个问题，即IG浏览器无法呈现模态框以适应屏幕。原来问题出在我使用的.webp图像上。将它们替换为png格式后，一切都好了。我使用了Tom Roggero的代码来识别IG浏览器，然后使用JS替换了img src属性。希望这能帮助到某些人！

- Chris Martin