웹 페이지가 태블릿에서 실행되는지 확인하십시오.

Question

내 Asp.Mvc 5 프로젝트에는 다음과 같은 가로형 메뉴가 있습니다. 홈, 제품 등 해당 메뉴에 대한 에 대해, 나는 페이지 크기가 감소하게 될 경우는, 드롭 다운 메뉴로 붕괴하기 위해 일부 CSS 스타일을 사용하고, 또는 해상도가 낮 :

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

이를 노트북과 PC에서 잘 작동합니다. 브라우저의 너비가 767px 아래로 내려 가면 드롭 다운이됩니다. 이것은 마지막으로 <li>을 첫 번째 <li> 아래에 두지 않기 때문입니다.

일반적으로 해상도가 높기 때문에 태블릿에서는 작동하지 않습니다. 그러나 마지막으로 <li>은 화면 크기가 작아 지므로 첫 번째 숫자 아래로 계속 이동합니다.

제 질문은 : Mvc5 웹 페이지가 태블릿에서 실행 중인지 확인하는 방법이 있습니까? 아니면 이런 식으로 처리하는 더 좋은 방법이 있습니까?

Answer 1

정제, 웹 페이지의 크기를 조절 초상화 그것을 시도를 제공하는 것을 선호 :

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

때 풍경에 정상으로 표시해야합니다 메뉴를 가정.

Answer 2

아마도 응답 성을 고려해야합니까?

페이지가 PC/태블릿/스마트 폰과 같은 많은 기기에 표시되기를 기대하는 경우 단순한 @media 문보다 낫습니다.

여기를보세요 : https://www.google.com/search?q=css+responsive+tutorial

Answer 3

당신은 시도하지 말아야 태블릿을 "감지"할 수 있습니다. 당신의 웹은 산에 작은 태어난 강물처럼 유동적이어야하며 바다에 도착하면 거대 해집니다.

스마트 폰이 점점 커지고 있으며 가까운 시일 내에 스마트 폰이 "태블릿"미디어 쿼리를 입력합니다.

귀하의 웹 사이트는 잘 보일 것입니다. 당신이 당신의 장치를 검색하려면

어쨌든, 당신은 내가 프로그래머 아니지만, 사무실에서 여기 내 개발자는 당신이를 보관할 수 있음을 알려줍니다 PHP Mobile Detect

처럼 PHP 스크립트를 사용하여 해당 서버 측 작업을 수행 할 수 있습니다 .NET에서와 동일합니다.