断点的媒体查询只有在触摸模拟打开时才有效

Question

我对 css 应用了一些媒体查询。这些似乎仅在从我为其设计的设备浏览网站时才有效，或者在使用浏览器响应式设计模式时打开触摸模拟时才有效。如果我只是简单地拖动屏幕来缩小它的大小，网站似乎没有响应。

知道为什么会这样吗？

这些是我正在使用的查询：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Style */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Style */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  /* Style */
}

在这里你可以看到网站 GH repo： https://bianchinicecilia.github.io/ceciliabianchini/index.html

在此先感谢您的帮助！ :)

Answer 1

我想我可以帮到你。

您使用的是已弃用的媒体查询。您不需要使用 -device-，只需使用 min-width 或 max-width。我还注意到您的网站没有视口元标记：<meta name="viewport" content="width=device-width, initial-scale=1.0">。这也很重要！

最后，检查所有元标记，因为有些尺寸存在冲突。

媒体查询列表： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

关于视口： https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

断点的媒体查询只有在触摸模拟打开时才有效

Media queries for breakpoints are effective only if touch simulation is on

css

media-queries

touch

screen

responsive