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

Posted 2023-02-23

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

【英文标题】：Website looks fine in PC at different widths but breaks in mobile phone

【发布时间】：2016-08-28 20:20:35

【问题描述】：

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

手机网站损坏

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

【问题讨论】：

这里有问题吗？

为什么会坏掉……很抱歉。

【参考方案1】：

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

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

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

【讨论】：

我认为实际需要的是删除视口标签，因为该网站没有响应。

我添加了这个已经认为这是问题所在。但它看起来仍然像搜索栏不在其父容器中并被移到另一个块中。我会尝试将搜索向左浮动，看看是否有效。

我从 中删除了 元素，但效果不佳@DanDevine