Material Design Lite responsive CSS 无法在 Mobile/Tablets 或 Chrome DevTools 模拟器中运行

Question

在试验 Google 的 Material Design Lite 的响应功能时，此代码在调整浏览器 window 大小时按预期隐藏了消息，但是当我在 Chrome DevTools 设备模拟器或在实际设备上，它只显示 "Desktop" 版本。如何修复我的 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>

Answer 1

要修复 MDL 不针对不同设备缩放的问题，请在 HTML 的 <head> 中添加此行：

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

Material Design Lite responsive CSS 无法在 Mobile/Tablets 或 Chrome DevTools 模拟器中运行

Material Design Lite responsive CSS not working on a Mobile/Tablets or in the Chrome DevTools emulator

html

css

responsive-design

material-design-lite