当我进入登录页面时，它处于桌面模式（响应式设计消失）

Question

各位！我正在开发一个基于 this 模板的项目。除登录页面外，模板上的一切正常。问题在于，当有人通过 phone 打开网站时，页面就像在桌面上一样。我从 themeforest 打开原始模板的登录页面，发现它实际上是响应式的，但对我来说不是。问题出在哪里？不幸的是，我无法将 link 分享到我的项目，因为它是给客户的。

要查看我正在使用的登录页面 - 单击 Pages，然后单击 Login

Answer 1

可能您 html 头部缺少视口元标记。需要视口元标记来控制网页的尺寸和缩放比例。在您的情况下，您的登录显示由媒体查询控制，例如max-width: 920px。 phone的实际分辨率可能比那个高。通过添加 width=device-width，您实际上告诉 phone 上的浏览器将页面缩小到实际屏幕大小，而不是使用媒体查询的分辨率。

值得注意的是，您可以向视口元标记添加更多设置，例如控制缩放（您可以找到更多信息 here）。

<html>
  <head>
    <!-- other header stuff -->
    <meta name="viewport" content="width=device-width">
  </head>
  <!-- document body -->
</html>

Answer 2

将其插入 head 标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

Answer 3

给你添加这个HTML视口<head>

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

当我进入登录页面时，它处于桌面模式（响应式设计消失）

When I go to login page it is in desktop mode (responsive design disappear)

css

responsive

html-templates