网站在不同宽度的PC上看起来很好，但在手机中断

Question

我正在练习从网站上取一个网站并用Photoshop复制然后编码。我注意到虽然我可以在浏览器的不同宽度上查看页面，虽然它没有响应，但没有一个div重叠或打破基本设计。但是当我在手机中查看时，搜索栏会重叠并从容器中移开。我在浏览器中添加了此视图的图片。 为什么手机会坏掉？这里也是heroku的链接： https://still-beach-27404.herokuapp.com/

手机网站破损

在缩小宽度的PC上看起来很好

Answer 1

通过阅读您的问题并不清楚您想要什么。但是，如果它已经存在，可以尝试将其添加到您的头标记中吗？

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

这通常可以解决我在不同设备上遇到的问题。