Проверьте, что веб-страница запущена на планшете

Question

Для моего проекта Asp.Mvc 5 у меня есть горизонтальное меню; Главный, Продукты, о и т.д. Для этого меню, я использовал некоторые CSS стилей, чтобы сделать его свернуть в раскрывающемся меню, если размер страницы становится снижаются, или низкое разрешение:

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

Этого отлично работает на моем ноутбуке и ПК; если ширина браузера будет ниже 767px, вместо этого он превратится в drobdown. Это было так, чтобы он не начинал ставить последний <li> ниже первого <li>.

Дело в том, что оно не работает на планшетах, так как разрешение обычно высокое. Но последний <li> по-прежнему будет перемещаться ниже первого, так как размер экрана меньше.

Итак, мой вопрос: есть ли способ проверить, работает ли ваша веб-страница Mvc5 на планшете? Или есть лучший способ справиться с чем-то подобным?

Answer 1

Таблетки предпочитают масштабировать веб-страницы, дать ему попробовать с портретом:

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

Предполагая, что меню должно показать, как обычно, когда на ландшафте.

Answer 2

Возможно, вам следует учитывать отзывчивость?

Это лучше, чем простые инструкции @media, если вы ожидаете, что страница будет отображаться на многих устройствах, таких как ПК/планшет/смартфоны.

Посмотрите здесь: https://www.google.com/search?q=css+responsive+tutorial

Answer 3

Вы не должны пытаться «обнаружить» таблетку. Ваша паутина должна быть жидкой, как река, которая рождается крошечной в горах и становится огромной, когда добирается до моря: вы получаете воду все время.

Смартфоны становятся все больше и, возможно, в ближайшем будущем смартфон войдет в ваш «планшетный» медиазапись.

Ваш сайт должен выглядеть хорошо.

Во всяком случае, если вы хотите, чтобы обнаружить устройство, вы можете сделать это на стороне сервера с PHP скрипт как PHP Mobile Detect

Я не программист, но мои разработчики здесь, в офисе мне подсказывает, что можно архивировать то же самое в .NET.