为什么网页分裂成这样？

Question

我是 Javascript 的新手。我试图制作一个摄影网站，从一个 codepen 项目中汲取灵感。

在我的电脑上 Google Chrome [版本 86.0.4240.111] 中查看时，网页看起来像这样 ...

但是当我在我的 iPad 或我的 Android phone 中打开同一个网页时，它已经分裂成这个看起来很奇怪的网站...

我已尽最大努力通过查看源代码来理解和解决问题，但我找不到任何东西。任何人都可以告诉我这个源代码有什么问题吗？我该如何解决这个问题以获得像桌面一样的响应式网页？

谢谢。

Answer 1

CSS 两个平板电脑的媒体查询。 768px 将捕获低于该值的所有内容，包含值和 500px 将分别捕获 .

现在您需要做的就是在 CSS 中指定您要定位的容器。

/* 平板电脑及以下 */

@media (max-width: 768px) {

}

/* 手机 */

@media(max-width: 500px) {

}

Answer 2

当我看到这个网站时，我立刻明白了你的错误，

有人启动时安静是正常的。当您必须为便携式设备制作任何网站时，您必须始终在标题部分使用以下 html 标签

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
</html>

我还建议您研究一下它是如何工作的我附上了 eveloper.mozilla 文档

Why the webpage splits up peculiarly like this?