假设我有一个APPLE PODCASTS按钮和一个GOOGLE PODCASTS按钮,我想显示:
我目前正在使用AMP通过使用<amp-list>
并调用动态生成的JSON文件来实现。那很好但我想知道是否有一种本机方式可以删除对这三个文件-<amp-list>
,<amp-mustache>
和动态JSON文件-的加载要求。
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: http://stackoverflow.com/a/9039885/177710
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