为啥我的 CSS 在移动设备上与在狭窄的桌面浏览器上看起来不同，我该如何更改？ [复制]

Posted 2023-03-31

【中文标题】为啥我的 CSS 在移动设备上与在狭窄的桌面浏览器上看起来不同，我该如何更改？ [复制]

【英文标题】：Why does my CSS look different on a mobile device than it does on my narrow desktop browser and how do I change it? [duplicate]为什么我的 CSS 在移动设备上与在狭窄的桌面浏览器上看起来不同，我该如何更改？ [复制]

【发布时间】：2021-10-08 08:37:22

【问题描述】：

窄桌面浏览器上的登录屏幕：

移动设备上的登录屏幕：

两侧具有相同的宽度和高度以及完全相同的 CSS 代码。 为什么看起来不一样，我该如何更改？

如果我尝试使用

@media screen and (max-width: 520px) ... 

要更改 div 的宽度，它在移动设备上看起来更好，但在桌面设备上则不同且更差。

【问题讨论】：

您介意发布该元素的代码吗？

检查您的元标记

看看：***.com/questions/4472891/… & ***.com/questions/7859336/…，如果这有助于您了解发生了什么。

【参考方案1】：

这是一个非常有用的标签，您可以将其放入 head 标签中。这可能是你的问题

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

【参考方案2】：

不要使用缩小桌面尺寸来在移动设备中查看您的网站 而是使用 chrome 开发人员工具上的移动图标来查看将在什么屏幕尺寸上显示的内容，并相应地使用 CSS 中的媒体查询，以便您可以在移动设备上获得所需的外观。

【参考方案3】：

尝试使用百分比而不是像素，它应该可以工作。 您可能会考虑的另一件事是使用引导登录页面。