检查网站是否在平板电脑上运行

Question

对于我的Asp.Mvc 5项目，我有一个横向菜单，如;家，产品，关于等 对于该菜单，我使用了一些CSS样式使其折叠到下拉菜单中，如果页面大小减小，或者分辨率很低：

@media screen and (max-width: 767px) {
  .headerNavigation{
  ....
  ... 
  } 
}

这在我的笔记本电脑和PC上运行良好;如果浏览器的宽度低于767px，它将使其成为drobdown。这样就不会开始将最后一个<li>放在第一个<li>之下。

问题是，它在平板电脑上不起作用，因为那里的分辨率通常很高。但是，由于屏幕尺寸较小，最后一个<li>仍会移动到第一个{{1}}以下。

所以我的问题是：如果您的Mvc5网页在平板电脑上运行，有没有办法检查？或者有更好的方法来处理这样的事情吗？

Answer 1

也许你应该考虑回应？

如果您希望页面显示在PC /平板电脑/智能手机等许多设备上，那么它比简单的@media语句更好。

看看这里：https://www.google.com/search?q=css+responsive+tutorial

Answer 2

您不应该尝试“检测”平板电脑。你的网络应该像河流一样流畅，在山上很小，到海边时变得很大：你一直都在喝水。

智能手机越来越大，可能在不久的将来智能手机将进入你的“平板电脑”媒体查询。

您的网站应该看起来很好。

无论如何，如果你想检测你的设备，你可以使用像PHP Mobile Detect

这样的PHP脚本来执行该服务器端

我不是程序员，但办公室里的开发人员告诉我你可以在.NET中存档。

Answer 3

平板电脑更喜欢扩展网页，尝试使用肖像：

@media only screen and (orientation:portrait) { .headerNavigation{ ... } }

假设菜单在横向显示时应显示正常。