问题
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.
Facing an issue for:
<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' is for blank space on left-right sides of 'div yield'
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)
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.
Everything worked fine till now.
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
Left one is of chromium browser under normal mode whose width is reduced to 357px.(this is my desired result
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)
screenshot
Why is this happening, and how to fix it?
回答1:
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">
来源：https://stackoverflow.com/questions/42891630/materialize-grid-s12-not-working-in-mobile-view