android - 用于移动设备和最大宽度桌面窗口的 Css @media

Question

实际上我有一个 web 小部件，当窗口宽度小于 max-width 属性时应该转换。

这应该适用于移动设备和调整大小的桌面浏览器窗口。

这些场景我都试过

   /* works only for mobile devices but not for re-sized desktop window */
   @media only screen and (max-device-width: 768px) { ... } 

   /* works only for re-sized desktop but not for mobile devices */
   @media only screen and (max-width: 768px) { ... } 

   /* works only for re-sized desktop window but not for mobile devices*/
   @media only screen and (max-device-width: 768px), (max-width: 768px) { ... }  

有没有办法为移动设备和宽度小于 768 像素的桌面浏览器窗口实现相同的行为？

Answer 1

使用它可以在手机和窗口上使用

@media all and (max-device-width: 768px) {
... 
}

和标题中的元标记

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