实例化网格s12在移动视图中不起作用 [英] materialize grid s12 not working in mobile view
问题描述
我正在尝试使用在轨道上使用ruby的网站来构建网站，该网站在不同的屏幕尺寸上会具有不同的样式.我正在使用materializecss来实现.
I am trying to built a website using ruby on rails which will have different styling on different screen sizes.I'm using materializecss to do so.
面对以下问题:
<div class="row">
<div class="col m2 l3 blank"></div>
<div class="col s12 m8 l6 yield">
<%= yield %>
</div>
<div class="col m2 l3 blank"></div>
</div>
'div blank'是'div yield'左右两侧的空白
'div blank' is for blank space on left-right sides of 'div yield'
我希望单位收益率将大屏幕(笔记本电脑)的屏幕比例提高到50％，中型屏幕(平板电脑)的屏幕比例提高到66％，小屏幕(移动电话)的屏幕比例提高到100％
i wanted the div.yield to take 50% screen for large screen(laptops) , 66% for medium screen(tablets) and 100% screen for small screen(mobiles)
当我在dekstop上的铬浏览器上对此进行测试时，得到了理想的结果.在调整窗口大小时，"div产量"是指屏幕宽度小于600像素为100％，宽度大于992像素为50％.
I got desired results when i tested this on chromium browser on my dekstop. On window resizing, 'div yield' is taking 100% screen size on width<600px and 50% on width>992px.
到目前为止一切正常.
但是当我切换到铬的移动仿真模式时，"div yield"不接受宽度小于600px的s12类，而是为宽度小于600px的m8类提供了服务.
But when i switched to mobile emulation mode of chromium, 'div yield' was not accepting s12 class for width<600px ,instead m8 class was serviced for width<600px.
下面是两个结果的屏幕截图
Below is the screenshot of both results
左一是普通模式下的铬浏览器，其宽度减小为357px.(这是我想要的结果
Left one is of chromium browser under normal mode whose width is reduced to 357px.(this is my desired result
右一是在移动仿真模式下的铬浏览器，宽度设置为357px.在此m8类中，代替了s12类.(不需要)
Right one is of chromium browser under mobile emulation mode, width set to 357px. In this m8 class is served instead of class s12. (not desired)
为什么会发生这种情况，以及如何解决?
Why is this happening, and how to fix it?
推荐答案
我只是看了一眼您的链接，问题是移动设备的实际屏幕宽度不一定与布局视口的宽度匹配.因此，例如在iPhone中，它为每个"css像素"使用2个屏幕像素，有效地使您的媒体查询相信"该屏幕为750像素宽(嗯，实际上，您只是希望这些像素是独立的的设备).这就是为什么它不选择较小的网格大小的原因.您必须指示页面匹配屏幕宽度(与设备无关的像素)，而简单的方法是使用 viewport 元标记.因此，如果将以下内容添加到< head> 中，则响应式设计将按预期工作:
I just took a peek at your link and the issue is that the actual screen width of mobile devices, doesn't necessarily match the width of the layout viewport. So for instance in the case of an IPhone, it uses 2 screen pixels for every "css pixel" effectively making your media query "believe" the screen is 750 pixel wide (well, it actually is, you just want those pixels to be independent of the device). That's why it doesn't pick the small grid size. You have to instruct the page to match the screen width in device-independent pixels, and the easy way to do that is using the viewport meta tag. So if you add the following to your <head>, your responsive design works as expected:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这篇关于实例化网格s12在移动视图中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
