html - AWS S3 响应式网站部署破坏了 CSS

Question

我有一个使用 flexbox 使其响应的静态网站。我已经在调整浏览器大小的桌面上以及在我的 iPhone 和 iPad 上进行了本地测试。一切都很好，但是，当部署到 S3 时，该网站可以在我的浏览器上运行，但不能在我的 iPhone/iPad 上运行。

我添加了:

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

没有成功。在查看 HTML 时，AWS 似乎将我的代码包装在它自己的 html 和 frameset 元素中。然后结构变为:

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 动态添加视口(viewport)元标记，但它不起作用。在 heroku 上部署工作得很好。

Answer 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 question