CSS로만 대상 데스크톱 브라우저

Question

응용 프로그램의 경우 데스크탑 브라우저 전용 사용자 정의 스크롤바를 표시하려고합니다.

일반적으로 작은 장치를 대상으로하고 화면의 사용 가능한 너비에 레이아웃을 적용하기 위해 미디어 쿼리를 사용합니다. 그러나 이번에는 모바일 및 태블릿 기기에 스크롤 바를 사용하는 것을 원치 않습니다. 작은 데스크톱 (1024 x 768)이 일부 태블릿과 동일한 해상도를 사용하기 때문에 어떻게 해결할 수 있는지 잘 모르겠습니다.

는 해킹이나 뭔가가 있나요, 그래서 내가 좋아하는 뭔가를 할 수 :

@media (target-real-desktops-only) { 
    ::-webkit-scrollbar { 
     width: 17px; 
    } 

    ::-webkit-scrollbar-thumb { 
     background-color: #959595; 
     border-radius: 40px; 
     border: 5px solid transparent; 
     background-clip: padding-box; 
    } 
} 

Answer 1

미디어 쿼리로 확실하게 알 수있는 방법은 없습니다. 내 생각에 가장 좋은 방법은 장치가 터치 장치인지 여부를 감지하여 차별화하는 것입니다. 그것에 대해 Modernizr을 사용할 수 있습니다. Modernizr은 html에 .touch 또는 .no-touch 클래스를 자동으로 추가합니다. 그런 다음 스타일을 적절하게 추가 할 수 있습니다.

또 다른 옵션은 수동으로 수행하는 것입니다. 그래서 같이 : 다음

document.querySelector('html').className += 
("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch ? ' touch' : ' no-touch'; 

그리고

.no-touch ::-webkit-scrollbar { 
    width: 17px; 
} 

.no-touch ::-webkit-scrollbar-thumb { 
    background-color: #959595; 
    border-radius: 40px; 
    border: 5px solid transparent; 
    background-clip: padding-box; 
} 

Answer 2

# Desktop 
 
only screen and (min-width: 992px) 
 

 
# Huge 
 
only screen and (min-width: 1280px)

Media Queries: How to target desktop, tablet and mobile?

Answer 3

바탕 화면의 태블릿 및 모바일을 대상으로하는 방법

미디어 쿼리 :

Look at this link: (출처 : www.stackoverflow.com)