当我进入登录页面时,它处于桌面模式(响应式设计消失)
When I go to login page it is in desktop mode (responsive design disappear)
各位!我正在开发一个基于 this 模板的项目。除登录页面外,模板上的一切正常。问题在于,当有人通过 phone 打开网站时,页面就像在桌面上一样。我从 themeforest 打开原始模板的登录页面,发现它实际上是响应式的,但对我来说不是。问题出在哪里?不幸的是,我无法将 link 分享到我的项目,因为它是给客户的。
要查看我正在使用的登录页面 - 单击 Pages,然后单击 Login
可能您 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>
将其插入 head 标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
给你添加这个HTML视口<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
各位!我正在开发一个基于 this 模板的项目。除登录页面外,模板上的一切正常。问题在于,当有人通过 phone 打开网站时,页面就像在桌面上一样。我从 themeforest 打开原始模板的登录页面,发现它实际上是响应式的,但对我来说不是。问题出在哪里?不幸的是,我无法将 link 分享到我的项目,因为它是给客户的。
要查看我正在使用的登录页面 - 单击 Pages,然后单击 Login
可能您 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>
将其插入 head 标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
给你添加这个HTML视口<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">