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

Question

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

手机网站损坏

在缩小宽度的 PC 上看起来不错

Answer 1

阅读您的问题并不清楚您想要什么。但是，如果它还没有，也许可以尝试将它添加到您的 head 标签中？

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

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