我正在使用物化在正在使用的Google Web App上进行样式和网格处理，但是无法在移动设备上使用该网格处理。
我确实在我的部分中放置了Materialise文档中建议的代码，也针对此问题materialize grid s12 not working in mobile view提出了建议，但是它不适用于我。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我可能做错了什么？我的完整HTML是
<!DOCTYPE html>
<html>
<head>
<title>Getting started</title>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("css"); ?>
<style>
body, html {
height: 100%;
margin: 0;
background-color: #26A69A;
}
</style>
</head>
<body>
<div class="col s12">
<!-- Preloader -->
<div id='preloader' class="fade col s12"></div>
<!-- End Preloader -->
<div class="title-text col s12" id="startingtitle">
Select Language / Επιλογή Γλώσσας
</div>
<div id="themessage" class="col s12">
<div class="row">
<div class="container divblock">
<div class="col m2 l3 hide-on-small-only"></div>
<div class="col s6 m5 l4">
<a onclick="gettingStarted('EN')"><div class="langselector">
<div class="langselectorcenter">
<img src="<?= flagEN; ?>" class="langselectorimg"> English
</div>
</div></a>
</div>
<div class="col s6 m5 l4">
<a onclick="gettingStarted('EL')"><div class="input-field langselector">
<div class="langselectorcenter">
<img src="<?= flagEL; ?>" class="langselectorimg"> Ελληνικά
</div>
</div></a>
</div>
<div class="col m2 l4 hide-on-small-only"></div>
</div> <!-- closing container -->
</div> <!-- closing row -->
</div> <!-- closing themessage -->
<div class="bottom col s12">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
简单-您没有正确使用网格标记。如果遵循文档中的指南，您将看到响应式网格由三个元素组成，它们以非常特殊的方式嵌套：
1。容器
这是最外面的元素，所有内容都位于其中。您可以根据设计选择每页一页或每节一页，但是很少在行或列中放置一个容器。它的名字暗示了它的作用-它包含内容，即设置可以的最大宽度：
手机：90％
平板电脑：85％
桌面：70％
2。行
行坐在容器中。它们跨越容器，底部留有一定间距，用于对列进行分组。
3。上校
颜色位于行内，这些是具有媒体查询样式以提供响应能力的实际元素：
s12 =在所有屏幕宽度上占用12列（一半的空间）
s6 =在所有屏幕宽度上占用6列（一半的空间）
m6在平板电脑宽度处占用6列（一半的空间）>>
l6 =在桌面宽度上占据6列（一半的空间）>>
您可以在cols内嵌套行以提供嵌套的网格，但是很少需要-您可以使用flexbox在cols内进行间距。
结构非常简单但非常具体：
<div class="container"> <div class="row"> <div class="col"> [content goes here] </div> <div class="col"> [content goes here] </div> </div> </div>我构建了一个演示基础的codepen here，并在每个元素上添加了边框，以便您可以看到每个元素占用了多少空间。