css - 手机纵向和横向版本完全一样

Question

@media for portrait and landscape 似乎在为这个网站使用 Bootstrap 时没有改变:http://moodisorder.com

任何人都可以解释一下我如何让这个网站在移动设备上响应单列纵向，以及在移动设备上与桌面版本相同的横向。

谢谢

Answer 1

对于 moodisorder.com 下的初学者，您还没有声明视口(viewport)，所以您必须在那里添加元视口(viewport)，如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1">

现在在 georgehowell.biz/sk/站点下有一个元视口(viewport)，但您正在通过框架集将此网站的内容拉入 moodisorcer.com，如下所示:

<frameset rows="100%,*" border="0">
  <frame src="http://georgehowell.biz/sk/" frameborder="0" />
  <frame frameborder="0" noresize />
</frameset>

我从来没有像您尝试的那样使用框架集或 iframe 来拉取内容，但是在框架的“noresize”中设置“rows=”100%,*”和附加参数可能证明是问题所在. 这可能会阻碍 Bootstrap 的工作。