특정 모바일 장치를 타겟팅하면 다른 대상 장치에 스타일이 적용됩니다.

Question

사이드 프로젝트에서 작업 중이며 Bourbon Neat을 그리드로 사용하고 있습니다. iPhone 5, iPhone 6 및 iPhone 6 Plus와 같은 특정 모바일 장치를 대상으로하는 몇 가지 미디어 쿼리가 있습니다. 제 질문은 스타일을 다른 기기로 옮기지 않고 특정 기기를 타겟팅 할 수 있습니까? 예를 들어 iPhone 6 및 iPhone 6 이상에 대해 미디어 쿼리를 설정했습니다. 여기

/* iPhone 6+ in portrait & landscape */ 
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { 
    /* STYLES GO HERE */ 
} 
/* iPhone 6+ in landscape */ 
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { 
    /* STYLES GO HERE */ 
} 
/* iPhone 6+ in portrait */ 
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { 
    /* STYLES GO HERE */ 
} 
/* iPhone 6 in portrait & landscape */ 
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 
    /* STYLES GO HERE */ 
} 
/* iPhone 6 in landscape */ 
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { 
    /* STYLES GO HERE */ 
} 
/* iPhone 6 in portrait */ 
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { 
    /* STYLES GO HERE */ 
} 

내가으로 파괴하고하는 것은 내가 아이폰 6 가로 미디어 쿼리에서 만드는 약간의 변화는 ... 내 미디어 쿼리처럼 보이는 것입니다 아이폰 6 플러스 풍경에 적용받을 것으로 보인다, 아이폰 6 미디어 쿼리 변경 사항은 iPhone 6 Plus 변경 사항보다 우선합니다. 다시 말하면 픽셀 너비가 비슷한 다른 장치에 변경 사항을 적용하지 않고 특정 장치 만 타겟팅 할 수 있습니까? 모든 도움이나 의견을 보내 주시면 감사하겠습니다. 고맙습니다.

Answer 1

미디어 쿼리에서보다 구체적으로 타겟팅하려는 장치 해상도를 찾을 수 있습니다.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)" { 
    /* styles */ 
} 

또는 가로 모드에서 아이 패드

:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) { 
    /* styles */ 
} 

그러나,이 기술로 당신이 끝나는 적용되지 않습니다 보장은 없습니다 예를 들어, 세로 모드에서 아이 패드를 대상으로 동일한 해상도로 다른 장치에 스타일 적용 기기를 타겟팅하는 가장 안전한 방법은 자바 스크립트와 일부 OS/기기 스니핑을 사용하는 것입니다.

Answer 2

마찬가지로 픽셀 너비가 비슷한 다른 기기에 변경 사항이 적용되지 않으면 특정 기기 만 타겟팅 할 수 있습니까?

구체적인 질문에 답하기 위해 폭, 높이 등을 사용하는 것 이외의 다른 방법으로 CSS를 통해 기기를 타겟팅 할 수는 없지만 실제로는 브라우저를 타겟팅하지 않습니다. 그래서 대답은 '아니오'입니다. 이를 위해서는 브라우저의 너비, 높이 또는 방향이 무엇인지 알 필요가 있습니다. 그리고 당신이 할 수 있다고해도, 나는 당신이 그것이 아주 깨끗한 해결책 인 IMO가 아니기를 원한다고 확신하지 못합니다.

기기로 타겟팅해야하는 경우 서버 또는 브라우저 사이드 코드를 사용해야합니다. 당신이 그 (것)들을 조사하려는 경우 여기에 일부 비 CSS 솔루션은 다음과 같습니다

1) 당신은 자바 스크립트 사용할 수 있습니다 http://hgoebl.github.io/mobile-detect.js/

2) 아니면 같은 서버 측 라이브러리를 사용할 수 있습니다 : http://mobiledetect.net/

그러나 더 나은 해결책은 스타일을 서로 재정의하지 않도록 CSS를 구성하는 것입니다.