MaterializeCSS谷歌应用响应式移动字体大小
我使用 MaterializeCSS 编写了一个谷歌网络应用程序。一切都在笔记本电脑上运行良好。我将其设计为响应式，通过减小笔记本电脑上浏览器的宽度进行测试，并且效果很好。
但是，当我使用 Chrome 在实际的 Android 手机上尝试它时，它正确地减少了列数，但我几乎无法阅读文本，因为它太小了。屏幕看起来就像笔记本电脑的宽度，每个输入字段都占据整个宽度。当我单击任何字段时，它会最大缩放到页面上的某个位置，我必须滚动才能找到我单击的字段，然后稍微缩小。抱歉我无法解释更多，这很奇怪。
我通过从 Materialise 网站复制“入门”代码和“文本输入”代码创建了一个简单的测试，并且发生了完全相同的事情。
表单 JS 中没有太多内容，我刚刚尝试了一些 Materialise 表单初始化。
当您在笔记本电脑上的浏览器中的代码片段中运行它时，看起来不错，但当您在手机上尝试时，它就会出错。
document.addEventListener('DOMContentLoaded', function() {
// M.updateTextFields();
M.AutoInit();
});<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 l6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s12 l6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</div>
</form>
</div>
</div> <!-- Close Container -->
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>I have written a google web app using materializecss. All works well on a laptop. I have designed it to be responsive, testing by reducing the width of the browser on my laptop and again, it workds well.
But, when I try it on an actual android phone using chrome, it is correctly reducing the number of columns, but I can barely read the text as it is soo small. It looks like the screen is laptop width, with each of the input fields taking the full width. When I click on any field, it goes maximum zoom to somewhere on the page and I have to scroll around to find the field I have clicked on, then zoom out a little. Sorry I can't explain any more, its wierd.
I have created a simple test by copying the 'Getting Started' code and 'Text Input' code from the materialize website and exactly the same thing happens.
There's not a lot in the form-JS, I have just been trying some Materialize form inits.
It looks fine when you run it in the code snippet on in a browser on a laptop, but when you try it on a phone it goes all wrong.
document.addEventListener('DOMContentLoaded', function() {
// M.updateTextFields();
M.AutoInit();
});<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 l6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s12 l6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</div>
</form>
</div>
</div> <!-- Close Container -->
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我没有看到您在使用您发布的代码测试时描述的问题：
https://codepen.io/panchroma/panchroma/pen/pen/pen/exoegnj
也许与此问题有关线
＆lt;？！= include（“ form-js”）; ？＆gt;您是否也可以发布此Form-JS文件？
I'm not seeing the problem you describe when testing with the code you posted:
https://codepen.io/panchroma/pen/ExoegNJ
Maybe there's an issue related to this line
<?!= include("form-JS"); ?>Are you able to post this form-js file as well?