Развертывание адаптивного веб-сайта AWS S3 ломает CSS

У меня есть статический веб-сайт, который использует flexbox, чтобы сделать его отзывчивым. Я тестировал локально как на своем рабочем столе, изменяя размер браузера, так и локально на моем iPhone и iPad. Все отлично работает, однако при развертывании на S3 сайт работает в моем браузере, но не на моем iPhone/iPad.

Я добавил:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

без успеха. Глядя на этот HTML, кажется, что AWS заключает мой код в свои собственные элементы html и наборов фреймов. Тогда структура становится:

html
  head element added by AWS
    meta elements added by AWS
  frameset element added by AWS
    frame element added by AWS
      #document element added by AWS
        my code

Как я могу это сделать? В моем браузере сайт выглядит просто отлично. Я также пытался использовать javascript для динамического добавления метатега области просмотра, но он не работает. Развертывание на героку работает нормально.


person Oliver Hoffman Garcia    schedule 16.12.2017    source источник
comment
Вы решили это? следующий ответ мне не помогает.   -  person Saket Nalegaonkar    schedule 14.07.2020


Ответы (1)


вы можете проверить ошибки развернутого веб-сайта s3, перейдя к элементу проверки в вашем браузере. Некоторые из ваших файлов должны быть заблокированы aws с ошибкой 403 Forbidden.

Чтобы этого избежать, можно использовать несколько способов.

  1. Подключите свой S3 к AWS CloudFront. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/MigrateS3ToCloudFront.html

  2. Измените политику корзины, вы можете сослаться на указанный URL-адрес или политику, указанную ниже. http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

Для получения дополнительной информации проверьте этот вопрос stackoverflow

person Lakindu Gunasekara    schedule 16.12.2017