响应 CSS 不适用于智能手机

Question

我必须创建一个特定的 CSS 文件才能将旧网站转变为响应式设计兼容性。问题是，即使新样式适用于桌面浏览器（缩小 window 时），它似乎也不会加载到智能手机上。

我使用了这样的@media 查询：

@media all and (max-width: 900px)
    {
     /* CSS */
    }

也尝试了不同的变化和大小，但没有成功。

@media all and (max-device-width: 900px)
{
    /* CSS */
}

由于这是一个编码怪异的旧网站，因此可能某处不兼容，但我不明白为什么它仍然可以在桌面上运行。当然，我尝试清空缓存，但都没有成功。

这是网站：http://www.antiquaire-du-vitrail.com/

知道问题出在哪里吗？

Answer 1

你应该试试：

@media screen and (max-width: 900px)
{
    /* CSS */
}

Answer 2

试试这个：

@media only screen and (max-width: 900px)  { 
/*put your styles here*/ 
}

在您的样式表中应用它后，按 CTRL+SHIFT+R（它会删除浏览器的缓存）

Answer 3

问题已解决！我只是忘记了 header 中的 VIEWPORT META。感谢您的快速回复。

Answer 4

您的 <head> 部分中是否有 <meta> 标签？

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

其次，我也会使用@duy nguyen 解决方案：

@media screen and (max-width: 900px)
{
 /* CSS */
}

Answer 5

您可以在 html

上添加元标记 header

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

并根据需要使用媒体查询。

例如：

@media screen and (max-width: 1024px) {
    /*your css doce here...*/
}

/*or*/
@media screen and (min-width: 1024px) {
    /*your css doce here...*/
}

您可以根据需要添加 min-height、max-height

响应 CSS 不适用于智能手机

Responsive CSS don't apply on smartphone

css

mobile-devices

responsive