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动态添加视口metatag，但它不起作用。在heroku上部署工作正常。

Answer 1

您可以通过在浏览器中检查元素来检查s3部署的网站错误。某些文件必须被aws阻止，并显示403 Forbidden错误。

为避免这种情况，您可以使用多种方法。

将您的S3连接到AWS CloudFront。 http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/MigrateS3ToCloudFront.html
更改存储桶策略，您可以参考给定的URL或下面给出的策略。 http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

有关详细信息，请查看此stackoverflow question

AWS S3响应式网站部署中断了CSS

1 个答案: