기기 유형에 따라 body 태그에 id를 할당하십시오.

Question

기기 유형에 따라 웹 페이지에 ID를 할당 할 수있는 방법이 있는지 궁금합니다. 예를 들어, 내가 뭘하고 싶은 무엇

#desktop { 
min-width:1200px; 
min-height:500px; 
} 

#tablet { 
min-width:600px; 
min-height:480px; 

#mobile { 
min-width:320px; 
min-height:400px; 

, 나는 장치를 감지하고 CSS 파일을 지정하는 방법이 알고있는 body 태그에이 ID를 할당하는 것입니다 다음과 같이 설정 한 CSS를 가지고 있지만, 장치를 기반으로 본문에 ID를 할당 할 수 있습니까?

Answer 1

미디어 쿼리라는 CSS 기능을 사용하면됩니다.

프로세스 : 장치에서 페이지를 제대로 표시 할 메타 태그 아래 페이지의 head 태그에 추가 (텍스트의 크기, 폭 등)

<meta name="viewport" content="width=device-width" /> 

또는

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

차이점을 검토하고 확대/축소를 활성화하려면 온라인을 확인하십시오.

그런 다음 CSS에서 다음과 같이 작성해야합니다.

CSS

Your curent css is here (for desktop) 
    #the_name_of_the_div_is_the_same{ 
     width:100%; 
     background-color:yellow; 
    } 

/* This are the 4 principals size of screen: */ 
/* No body is using this one 
@media screen and (max-width: 1680px) { 
    #the_name_of_the_div_is_the_same{ 
     Do something in css 
    } 
}*/ 

/* Then, if the width of the screen is under 960px and above 758px, your div will get this attributes */ 
@media screen and (max-width: 960px) { 
    #the_name_of_the_div_is_the_same{ 
     width:80%; 
     background-color:red; 
    } 
} 

@media screen and (max-width: 758px) { 
    #the_name_of_the_div_is_the_same{ 
     width:30%; 
     background-color: black; 
    } 
} 

@media screen and (max-width: 524px) { 
    #the_name_of_the_div_is_the_same{ 
     width:70%; 
     background-color: green; 
    } 
} 

치수 :

아이폰 3 + 4 세로 W320 × 480

아이폰 5 세로 320 X 568

진절머리 나는 안드로이드 세로 240 × 320

Android (삼성 갤럭시) 685

아이 패드 세로 768 X 1024

킨 세로로 세로 380 600 × 1024

아니면 (3 다른 페이지를 장치를 감지하고 올바른 페이지로 리디렉션하는 플러그인을 사용할 수 있습니다 , 또는로드 3 다른 CSS 등) 그들의 장치에 따라. 참고 :이 솔루션을 사용하면 웹 사이트가 응답하지 않지만 모든 장치에서 작동합니다.