您可以使用 AMP 检测 iPhone 与 Android 吗？

Question

假设我有一个 APPLE PODCASTS 按钮和一个 GOOGLE PODCASTS 按钮，我想显示：

iPhone 用户的 APPLE 播客
GOOGLE 向 Android 用户播客
桌面用户都可以

我目前通过使用 <amp-list> 并调用动态生成的 JSON 文件来实现此目的。那很好用；但我想知道是否有一种本机方法可以消除对这三个文件的要求 - <amp-list>、<amp-mustache> 和动态 JSON 文件 - 被加载。

Answer 1

您可以检测 amp-script 中的 UA 字符串，然后相应地更新按钮：

<amp-script layout="fixed-height" height="50"
  script="user-agent-script">
  <button id="android" hidden>Android</button>
  <button id="iOS" hidden>iOS</button>
</amp-script>

<script id="user-agent-script"
  type="text/plain"
  target="amp-script">

  function getMobileOS() {
    const userAgent = navigator.userAgent;
    if (/android/i.test(userAgent)) {
      return "android";
    }
    // iOS detection from: 
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      return "ios";
    }

    return "other";
  }

  const androidButton = document.querySelector('#android');
  const iosButton = document.querySelector('#ios');

  const os = getMobileOS();
  if (os === 'android') {
    androidButton.removeAttribute('hidden');
  } else if (os === 'ios') {
    ios.removeAttribute('hidden');
  } else {
    androidButton.removeAttribute('hidden');
    ios.removeAttribute('hidden');
  }

</script>

样本：https://amp.dev/documentation/examples/components/amp-script/#detecting-android-vs-ios-in-amp

您可以使用 AMP 检测 iPhone 与 Android 吗？

Can you detect iPhone vs Android with AMP?

amp-html