페이지 너비에 따라 CSS 라이브 변경

현재 페이지 너비를 기반으로 특정 스타일을 페이지에 추가하려고합니다. 나는 이것이 살아있는 기능을 원한다. 예를 들어, iPhone에서보고 이미로드 된 페이지를 보면서 화면을 회전하면 CSS가 변경됩니다. 또한 모바일 jquery 라이브러리를 사용하는 것이 이상적입니다. 도움에 미리 감사드립니다. 여기가 작동하지 않는 지금까지 무엇을 가지고, 또한 LiveQuery를 사용하여 시도하고는, 지금 중페이지 너비에 따라 CSS 라이브 변경

$(function() { 
    $(document).live('css_init', function() { 
      if (($(window).width()) > 430) { 
       $('#main_panels .next').addClass("next-wide"); 
       $('#main_panels .prev').addClass("prev-wide"); 

      }; 
     }); 
     $(document).trigger('css_init'); 
});

출처

2012-02-10 pbal

미디어 쿼리를 고려 했습니까? –

정지 작업을 모두 선택하고 백 스페이스 충돌/키보드의 키를 삭제하지 않았다 .

이제 그 공포가 퇴색했습니다. Media Queries을 소개하겠습니다. 이는 모든 최신 휴대 기기 (예 : WAP 포털이 아닌 풀 웹 브라우저를 사용하는 기기)에서 완벽하게 지원됩니다. 최신 데스크탑 브라우저에서도 이미 널리 지원됩니다. 단 하나의 예외는 IE < 9이며, 이에 대해서는 Respond.js입니다.

이제 웹 표준의 영광을 즐기십시오.

출처

2012-02-10 22:02:29

+1 방식으로 당신이 설명 : – ShankarSangoli

내 PC에서 사파리에서 작동하지만 내 휴대 기기에서 작동하지 않습니다. 이 기능은로드시가 아니라 CSS 라이브를 업데이트해야합니다. – pbal

미디어 쿼리가 실시간으로 업데이트됩니다. 그렇지 않은 경우 사용중인 검색어에 문제가 있거나 특정 모바일 기기/모바일 브라우저에 버그가 있습니다. 일부 장치는 폭과 장치 폭을 다른 장치와 다르게보고합니다. 또한 device-width는 일부 기기에서는 방향에 영향을받지 않습니다. 즉, 기기의 너비는 기기의 너비입니다. 쿼리를 예상대로 작동 시키려면 테스트 및 조정이 필요하지만 웹에 오신 것을 환영합니다. –

jquery 크기 조정 이벤트 리스너를 사용할 수 있습니까?

myFunction() { 
    var w = $(window).width(); 
    if (w > 430){ 
     // do stuff 
    }; 
} 
$(window).resize(function(){ 
    myFunction(); 
}

출처

2012-02-10 22:03:18

CSS 미디어 검색어는 자바 스크립트없이 원하는대로 할 수 있습니다. 이 같은

시도 뭔가 :

<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/landscape.css' />

당신은 일부 하드 해상도의 제약 조건을 추가 할 수 있지만 쉽게 할 수 이잖아 수 있습니다.

http://css-tricks.com/css-media-queries/

출처

2012-02-10 22:05:20 Hersha

페이지 너비에 따라 CSS 라이브 변경

답변

관련 문제