手机纵向和横向版本一模一样

Question

在本网站使用 Bootstrap 时，用于纵向和横向的@media 似乎没有改变：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 的工作。