Html Material Design Lite响应CSS不适用于手机/平板电脑或Chrome DevTools模拟器_Html_Css_Responsive Design_Material Design Lite

Html Material Design Lite响应CSS不适用于手机/平板电脑或Chrome DevTools模拟器

html css responsive-design

Html Material Design Lite响应CSS不适用于手机/平板电脑或Chrome DevTools模拟器,html,css,responsive-design,material-design-lite,Html,Css,Responsive Design,Material 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">

在试验谷歌的响应功能时，这段代码在调整浏览器窗口大小时会像预期的那样隐藏消息，但当我在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的

中添加此行：

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