我正在尝试使用ruby on rails建立一个网站,它将在不同的屏幕尺寸上具有不同的样式.我正在使用materializecss这样做.
面临以下问题:
<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.yield在大屏幕(笔记本电脑)上占50%的屏幕,中型屏幕(平板电脑)占66%,小屏幕占用100%的屏幕(手机)
当我在dekstop上的Chrome浏览器上测试时,我得到了理想的结果.在窗口调整大小时,'div yield'在宽度<600px时采用100%屏幕尺寸,在宽度> 992px时采用50%.
一切都很好,直到现在.
但是当我切换到铬的移动仿真模式时,'div yield'不接受宽度<600px的s12类,而是为宽度<600px服务m8类.
以下是两个结果的屏幕截图
左边一个是普通模式下的铬浏览器,宽度减少到357px.(这是我想要的结果
右边一个是移动仿真模式下的铬浏览器,宽度设置为357px.在这个m8类中,而不是类s12.(不想要)
为什么会发生这种情况,以及如何解决这个问题？
Nik*_*sen 10
我只是看了你的链接,问题是移动设备的实际屏幕宽度,不一定与布局视口的宽度相匹配.因此,例如在iPhone的情况下,它为每个"css像素"使用2个屏幕像素,有效地使您的媒体查询"相信"屏幕宽度为750像素(嗯,实际上,您只是希望这些像素是独立的的设备).这就是它没有选择小网格尺寸的原因.您必须指示页面与设备无关的像素中的屏幕宽度匹配,并且使用viewport元标记的简单方法是这样做.因此,如果您将以下内容添加到您的中<head>,您的响应式设计将按预期工作:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
| 归档时间： |
|
| 查看次数： |
2501 次 |
| 最近记录： |