2012-06-08 5 views
2

가능한 복제를 : 나는이 프로젝트의 중간에 오전
CSS media type: How to load CSS for mobile?변경 스타일

, 당신은 내가에서 사용하는 모든 코드를 볼 수 있습니다 출처.

홈페이지에는 경량 자바 스크립트 슬라이더가 있습니다. 문제는 모바일 장치에서 사용할 때 어떤 이유로 표시되지 않습니다. 그렇다면 누구나 내가 솔루션을 찾도록 도울 수 있습니까? 아니면 모바일에서 볼 때 어떻게 다른 것을 보여줄 수 있습니까?

내가이 사용하는 다른 IE의 스타일을 표시하려면 모바일 비슷한 일이

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="css/ie.css" /> 
<![endif]--> 

있습니까?

+4

리키! [미디어 쿼리] (http://css-tricks.com/css-media-queries/)! – Dunhamzzz

+0

[this] (http://www.thesitewizard.com/css/excludecss.shtml)가 도움이 될 수 있습니다. – Leri

+0

-1 문제가있는 코드 만 포함하고 질문이 아니라 링크로 포함하십시오. –

답변

8

당신은 그것을 위해 mediaqueries를 사용할 수 있습니다 http://www.w3.org/TR/css3-mediaqueries/

하는 것은 기본적으로는 다음과 같습니다

@media only screen and (max-device-width: 480px) { 
    /* .... styles */ 
} 
+0

괜찮습니다. 모바일에서 보았을 때 자바 스크립트 슬라이더를 숨길 수있는 방법을 알려 주시면 감사하겠습니다. 가능한가? – RuFFCuT

+0

@RickyDawn 당신은 오른쪽에 자바 스크립트 슬라이드 쇼를 의미합니까? 미디어 쿼리'# coin-slider {display : none;} '를 INSIDE에 추가하면됩니다. – Christoph

+0

대단히 고마워! – RuFFCuT

0

는 PHP와 함께이 작업을 수행하려면, 당신은 아래에 비슷한 사용할 수 있습니다

// check if user agent is mobile 
function isOnMobile() 
{ 
    // match popular mobile devices 
    if (preg_match('/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|mobi|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo|mobile/', strtolower($_SERVER['HTTP_USER_AGENT']))) 
    { 
    return TRUE; 
    } 
    return FALSE; 
} 
+2

UA 스니핑은 결함이 있습니다. – Christoph

+0

점은 PHP에서 수행하고 싶다고 가정하고 질문을 다시 읽었습니다. – ku6pk

0

미디어 쿼리 사용 시도 :

@media (max-device-width: 500px) { 

} 
@media (min-device-width: 500px) { 

} 
0

일부 사람들은 브라우저가 악성 스니핑을 사용하여 미디어 쿼리가 좋은 해결책이 될 수 있다고 생각합니다.

모바일 장치에는 다른 브라우저가 있고 각 브라우저는 다른 (특히 검은 장과 장치) 동작을하기 때문에 제 관점에서 보았습니다. 브라우저에서 미디어 쿼리를 스니핑해야합니다.

각 모바일 장치의 화면 해상도가 달라 지므로 지원하려는 각 모바일 장치마다 서로 다른 CSS 조건이 필요합니다.

이 링크에 대한 훌륭한 자습서가 있습니다.

How to use media queries

Resolution specific style sheets

Javascript Browser Detection