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

Question

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

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

谢谢

Answer 1

您将不得不使用媒体查询，在编写媒体查询时，您可以定义 orientation:portrait 或 orientation:landscape 并相应地应用 css 。

Answer 2

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

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

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

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

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

Mobile portrait and landscape versions exactly the same