Ruby on rails Rails：有没有办法确定观众是从纵向还是横向观看？

在我的Rails 5应用程序中，如果用户在平板电脑上以纵向方向观看，我希望使菜单显示选项比在平板电脑上以横向方向观看更有效

我用gem来检查这个人是否在平板电脑上

我的观点是这样的：

<nav class="navbar"> 
  <% if browser.device.tablet? %>
    <li> 
      <%= link_to "Shop", shop_path %>
    </li>  

    # how do I check if someone is viewing in portrait orientation? 
    <li>          
      <%= link_to "About", about_path %> 
    </li>
    # end portrait orientation        

  <% end %>
</nav>

#如何检查是否有人以纵向观看？


#端面纵向定向

---

有没有办法用Ruby检查页面方向？谢谢

我不知道使用Ruby检测方向的任何方法，但您可以使用jQuery Mobile，使用

orientationchange

事件：

$(window).on('orientationchange', function() {
  // your code...
});

例如：

$(window).on('orientationchange', function() {
  if(window.orientation == 0) {
     // 0 is for portrait
     $('portrait-only').show();
  } else { 
     $('portrait-only').hide();
  }
});

现在，在表单上，将

id

添加到

标记中：

<li id="portrait-only">          
  <%= link_to "About", about_path %> 
</li>

---

我不知道有什么方法可以用Ruby检测方向，但您可以使用jQuery Mobile，使用

orientationchange

事件：

$(window).on('orientationchange', function() {
  // your code...
});

例如：

$(window).on('orientationchange', function() {
  if(window.orientation == 0) {
     // 0 is for portrait
     $('portrait-only').show();
  } else { 
     $('portrait-only').hide();
  }
});

现在，在表单上，将

id

添加到

标记中：

<li id="portrait-only">          
  <%= link_to "About", about_path %> 
</li>

---

使用引导，您可以强制仅在特定设备宽度上可见内容

<nav class="navbar"> 
  <% if browser.device.tablet? %>
    <li> 
      <%= link_to "Shop", shop_path %>
    </li>  

    # how do I check if someone is viewing in portrait orientation? 
    <li class="visible-xs visible-sm"> <!-- this is only visible below 768px -->       
      <%= link_to "About", about_path %> 
    </li>
    # end portrait orientation        

  <% end %>
</nav>

#如何检查是否有人以纵向观看？


#端面纵向定向

更多关于引导的信息可以找到

---

此外，如果您需要的话，还有很多关于如何将引导与rails集成的指南。

使用引导，您可以强制只在特定的设备宽度上显示内容

<nav class="navbar"> 
  <% if browser.device.tablet? %>
    <li> 
      <%= link_to "Shop", shop_path %>
    </li>  

    # how do I check if someone is viewing in portrait orientation? 
    <li class="visible-xs visible-sm"> <!-- this is only visible below 768px -->       
      <%= link_to "About", about_path %> 
    </li>
    # end portrait orientation        

  <% end %>
</nav>

#如何检查是否有人以纵向观看？


#端面纵向定向

更多关于引导的信息可以找到

---

---

此外，如果您需要的话，还有很多关于如何将引导与rails集成的指南。

您可以使用引导来检查设备宽度，甚至是简单的媒体查询。谢谢@Dithanial，您是否有一个示例说明如何通过CSS更改实际内容？显然，您可以更改外观，但如何通过CSS更改内容，如我的示例中所示？您可以使用引导来检查设备宽度，甚至简单的媒体查询。谢谢@Dithanial，您有如何通过CSS更改实际内容的示例吗？显然，您可以更改外观，但如何通过CSS更改内容，如我的示例中所示？谢谢！有没有一种方法可以调整您示例中的代码，使其成为两个完全不同的菜单？例如，如果是纵向显示，但如果是横向显示，请使用两个标签（一个带有纵向菜单，另一个带有横向菜单）使用不同的

id

，在脚本中，一个调用

show（）

，另一个调用

hide（）。或者有显示两个菜单的风险吗？@YellowRever您可以在任何事件发生时自由添加/删除或显示/隐藏页面中的任何元素，在您的情况下，使用
orientationchange
@YellowRever是的，有风险，如果我理解正确，您将根据方向只显示一个。因此，如果同时显示这两个菜单，则必须同时显示菜单，因此需要在显示另一个菜单时隐藏其中一个菜单。谢谢！有没有一种方法可以调整您示例中的代码，使其成为两个完全不同的菜单？例如，如果是纵向显示，但如果是横向显示，请使用两个标签（一个带有纵向菜单，另一个带有横向菜单）使用不同的
id
，在脚本中，一个调用
show（）
，另一个调用
hide（）。或者有显示两个菜单的风险吗？@YellowRever您可以在任何事件发生时自由添加/删除或显示/隐藏页面中的任何元素，在您的情况下，使用
orientationchange
@YellowRever是的，有风险，如果我理解正确，您将根据方向只显示一个。因此，如果同时显示两个菜单，则必须同时显示菜单，因此需要在显示另一个菜单时隐藏其中一个菜单。我喜欢这种方法（更方便），但当屏幕较小（即小于768px）时，应如何调整此代码以避免潜在问题在纵向和横向两种情况下，响应式web开发涉及到的情况太多，不可能涵盖所有内容。这真的取决于你想要什么，以及你想要事物的样子。最好的方法是在需要时使用CSS处理媒体查询，并使用浏览器的开发工具查看页面在每个宽度上的外观。Rails附带了Sass，您可以使用嵌套的媒体查询来关注每个元素，使它们在每个宽度上都以您希望的方式显示。我选择了这个解决方案，因为我不想添加更多的JS。让这个为我工作。谢谢我喜欢这种方法（更方便），但当屏幕在纵向和横向上都很小（即小于768px）时，应该如何调整此代码以避免潜在问题？响应式web开发涉及的情况太多，因此不可能涵盖所有内容。这真的取决于你想要什么，以及你想要事物的样子。最好的办法是操纵y