Блог

Главная - Вопросы по программированию - баннер приложения amp не отображается в Safari, хотя работает на Android

баннер приложения amp не отображается в Safari, хотя работает на Android

#next.js #amp-html

#next.js #amp-html

Вопрос:

Недавно мы внедрили баннер приложения amp и он отлично работал во всех браузерах, которые мы тестировали, за исключением Safari.

В заголовке страницы мы добавили это: 

 <meta name="apple-itunes-app" content="app-id=1234567890" />

В разделе body, первый дочерний элемент, мы добавили эту разметку:

 <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.9, 15610)
MacBook Pro (Retina, 15 дюймов, середина 2015 года)
macos 10.15.7

Версия AMP 2010132225003

Комментарии:

1. Почему фигурные скобки style= ? Просто используйте двойные кавычки. Кроме того, безопаснее перемещать эти элементы <style amp-custom> . Кроме того, meta свойства не связаны с содержимым <body> . Я действительно удивлен, что это работало где угодно как есть.

2. фигурные скобки, поскольку мы используем Nextjs, это синтаксис. Я не уверен насчет amp-custom, придется это посмотреть. Теперь самое важное, вы говорите, что мета-свойства не связаны? Я не уверен, что понимаю, что вы имеете в виду, просто имейте в виду, что все необходимые компоненты amp загружены правильно, я просто взял фрагменты кода. Я был бы очень признателен, если бы вы немного подробнее рассказали.