모바일 용 조건부 자바

저는 몇 주 동안이 문제에 대한 다양한 해결책을 시도해 왔습니다! 내 고정 메뉴 사업부가 바탕 화면에서 화면 스크롤, 모바일/태블릿에 넣어 유지할 수 있도록 :(모바일 용 조건부 자바

내가 내 자바 스크립트 조건부 장치 폭을 기준으로로드하고 싶은

.입니다. 여기에

입니다 내 스크립트, 나는 추가 시도

<script type="text/javascript"> 
jQuery(function($) { 
function fixDiv() { 
    if ($(window).scrollTop() > 310) 
    { 
    $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
    } 
    else 
    { 
    $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'}); 
    } 
} 
$(window).scroll(fixDiv); 
fix5iv(); 
} 
}); 
</script>

<script type="text/javascript"> 
jQuery(function($) { 
if ($(window).width() > 480) { 
function fixDiv() { 
    SCRIPT FUNCTION 
} 
}); 
</script>

... 그리고,

<script type="text/javascript"> 
jQuery(function($) { 
if (matchMedia('only screen and (max-width: 480px)').matches) { 
function fixDiv() { 
    SCRIPT FUNCTION 
} 
}); 
</script>

또한 CSS를 사용하여 @media 쿼리를 시도하여 장치 너비에 따라 div의 위치를 변경했습니다. 이것은 아무런 결과가 없으며, 자바 스크립트 스타일은 중요하므로 내 스타일 시트에 적용되는 모든 스타일을 오버라이드하는 것으로 보입니다.

내가 시도한 자바 스크립트 변경 사항은 모바일/태블릿 및 데스크톱 모두에서 스크립트를 사용 또는 사용 중지하도록 설정했습니다. 그래서 내 코드는 일종의, 작동하지만 장치의 너비가 올바르게 감지되지 않는 것 같습니다.

내 뷰포트 설정이 장치 폭을 방해하여 모든 broswer에서 동일한 결과를 생성 할 수 있음이 분명해졌습니다.

<meta name="viewport" content="width=1100"/>

그러나이 스 니펫을 사용 중지 한 후에도 (코드에서 코드를 완전히 제거한 후에도) 동일한 문제가 계속 발생합니다.

나는 분명한 뭔가를 놓치고 있습니까? 솔루션이 존재하지 않습니까?

미리 감사드립니다.

출처

2013-05-28 JKD

이 문제를 해결하기 위해 JS가 필요하지 않습니다. 미디어 쿼리 + 적절한 메타 태그 만 사용하십시오. 내가 말하는 것에 대해 this gist을 참조하십시오.

출처

2013-06-05 16:09:55

모바일 용 조건부 자바

답변

관련 문제