#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 загружены правильно, я просто взял фрагменты кода. Я был бы очень признателен, если бы вы немного подробнее рассказали.