在试用GoogleMaterial Design Lite的响应特性时，这段代码会在调整浏览器窗口大小时按预期隐藏消息，但当我在Chrome DevTools设备模拟器或实际设备上查看我的页面时，它只显示“桌面”版本。如何修复HTML？
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-cell--hide-phone mdl-cell--hide-tablet">
You are on a desktop
</div>
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet">
You are on a phone
</div>
<div class="mdl-cell--hide-desktop mdl-cell--hide-phone">
You are on a tablet
</div>
</body>
</html>
最佳答案
若要修复MDL无法针对不同设备进行缩放，请在HTML的<head>中添加这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于html - Material Design Lite响应CSS无法在移动设备/平板电脑或Chrome DevTools模拟器中运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33044102/