Next.js amp应用程序横幅不会在Safari上显示，即使在android上工作

我们最近实现了amp-app-banner，并且在除Safari之外的测试浏览器上运行良好

在页眉中，我们添加了以下内容：

在body，first child下，我们添加了以下标记：

<amp-app-banner
    layout="nodisplay"
    id="our-app-banner"
    style={{
        top: '0px',
        height: '40px',
        minWidth: '343px',
    }}
>
    <InstallMobileAppBar />
</amp-app-banner>

下面是我们编写InstallMobileAppBar组件的方法：

      <div className="install-mobile-app-bar">
        <div id="install-app-panel" className="install-app-panel">
            <div
                style={{
                    display: 'flex',
                    minWidth: '202px',
                    marginRight: '24px',
                }}
            >
                <div
                    style={{
                        flexDirection: 'column',
                        textAlign: 'right',
                        marginRight: '5px',
                    }}
                >
                    <div
                        style={{
                            fontSize: '12px',
                            fontWeight: 'bold',
                        }}
                    >
                      text
                    </div>
                    <div
                        style={{
                            fontSize: '8px',
                        }}
                    >
                        text
                    </div>

                    <div className="banner-stars">
                        <Star />
                        <Star />
                        <Star />
                        <Star />
                    </div>
                </div>
                <div className="app-banner-logo">
                    <amp-img
                        alt="khareta-banner-logo"
                        src="/images/icons/icon-96x96.png"
                        width="50"
height="50"
                        layout="fixed"
                    ></amp-img>
                </div>
            </div>
            <div
                style={{
                    display: 'flex',
                }}
            >
                <button className="open-button" open-button="open-button">
                    download app now
                </button>
            </div>
        </div>
    </div>

文本
文本
立即下载应用程序

Safari 14.0（15610.1.28.1.915610） MacBook Pro（视网膜，15英寸，2015年年中） macos 10.15.7

---

AMP版本201013225003

为什么要使用

样式=

的大括号？只用双引号。此外，将这些元素移动到

中更安全。此外，

meta

属性与

中的内容无关。事实上，我很惊讶这在任何地方都能正常工作，因为我们使用了Nextjs，这是一种语法。我不确定amp定制，我得查一下。现在重要的是，你说元属性是不相关的？我不确定我是否明白你的意思，只是请记住所有必需的amp组件都已正确加载，我只是提取了代码片段。如果你能再详细一点，我将不胜感激。

      <div className="install-mobile-app-bar">
        <div id="install-app-panel" className="install-app-panel">
            <div
                style={{
                    display: 'flex',
                    minWidth: '202px',
                    marginRight: '24px',
                }}
            >
                <div
                    style={{
                        flexDirection: 'column',
                        textAlign: 'right',
                        marginRight: '5px',
                    }}
                >
                    <div
                        style={{
                            fontSize: '12px',
                            fontWeight: 'bold',
                        }}
                    >
                      text
                    </div>
                    <div
                        style={{
                            fontSize: '8px',
                        }}
                    >
                        text
                    </div>

                    <div className="banner-stars">
                        <Star />
                        <Star />
                        <Star />
                        <Star />
                    </div>
                </div>
                <div className="app-banner-logo">
                    <amp-img
                        alt="khareta-banner-logo"
                        src="/images/icons/icon-96x96.png"
                        width="50"
height="50"
                        layout="fixed"
                    ></amp-img>
                </div>
            </div>
            <div
                style={{
                    display: 'flex',
                }}
            >
                <button className="open-button" open-button="open-button">
                    download app now
                </button>
            </div>
        </div>
    </div>