我对JavaScript相当陌生。我尝试过做一个摄影网站，从一个codepen项目中获得灵感。
在我的计算机上使用Google Chrome[Version 86.0.4240.111]查看时，网页看起来是这样的。。。
但当我在iPad或Android手机中打开相同的网页时，它已经分裂成了这个外观奇特的网站……
我已经尽力通过查看源代码来理解和修复这个问题，但是我找不到任何一个。有谁可以建议我这个源代码有什么问题，我怎样才能修复这个以得到一个像桌面一样的响应性网页？
网站:摄影灵感网站实况
源代码:网站源代码
谢谢。
我们需要与CSS媒体查询在这里的两个平板电脑，如果你想要，以及移动，如果你需要它。768px将捕获该值下的所有内容，包含值，500px将分别捕获。
现在您所需要做的就是在CSS中指定您想要针对的容器，例如，您的hero部分，您将主要使用width属性来处理这个容器。
/*片及以下*/
@media (max-width: 768px) {
}
/*移动*/
@media(max-width: 500px) {
}
当我看到这个网站时，我立刻明白了你的错误，
当有人开始时安静是正常的。当您必须创建任何站点时，即使是针对便携式设备，您也必须始终在head部分使用以下html标记
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
我还建议您研究一下它是如何工作的我附上了eveloper.mozilla文档
文件编制
