【问题标题】:@media (max-width: 640px) not working for mobile [closed]@media(最大宽度:640px)不适用于移动设备[关闭]
【发布时间】:2021-12-26 05:18:03
【问题描述】:

这个codepen 链接:https://codepen.io/gianlucaas/pen/bGrmQVO 托管我的代码,用于我的一个新网站页面。

问题是,当我在移动设备上进行测试时(您也可以在 codepen 链接上尝试),它看起来很完美。您可以看到劳力士转到右上角(图像),看起来很合适。但是,当我转到我的实时链接时,这是(出于隐私目的,现在不会显示)。请参阅下面解决问题的答案...

(在我的 IPHONE 上),它看起来像桌面应用程序,但它应该看起来像手机版本!我无法弄清楚为什么我的生活。有人对我可能做错了什么有任何建议吗?

【问题讨论】:

  • 你的头部需要<meta name="viewport" content="width=device-width, initial-scale=1">
  • @JHeth 谢谢!这有帮助并且奏效了。不敢相信我错过了。感谢您的帮助。

标签: html css ejs


【解决方案1】:

您需要在页眉中定义视口,codepen 补充说。

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

【讨论】:

  • 谢谢!这有帮助并且奏效了。不敢相信我错过了。感谢您的帮助。
  • 帮助你多次犯同样的错误:D
【解决方案2】:

在您的代码笔中,您的最大宽度为 640 像素:

@media (max-width: 640px) {

在您的实时应用中,它是 440 像素:

@media (max-width: 440px) {

【讨论】:

  • 肯定犯了这个错误。我的错。问题是我错过了视口元标记,如上所示。不过感谢您的支持!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-12-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-16
  • 1970-01-01
相关资源
最近更新 更多