모바일에서 jQuery를 실행하는 경우

내 사이트에 슬라이드 당 하나의 슬라이드 상자가 있으며, 미디어 쿼리를 사용하여 불행하게도 display: none을 많이 포함하는 모바일 스타일 시트를 포함합니다. 우리가 결정할 때까지 slidebox는 display:none 중 하나였습니다 (최신 최신 콘텐츠 표시 등) 사이트를 다시 추가하기로 결정했습니다.모바일에서 jQuery를 실행하는 경우

어쨌든 긴 이야기를 짧게 잘라서, 탭을 사용하여 각 슬라이드 간을 이동하고 탭 내에서 콘텐츠의 제목 즉. 'Big Event'또는 'Sign Up Here'등 모바일 장치에서 이것은 너무 길어서 화면을 기반으로 1, 2, 3, 4 등으로 텍스트를 변경하는 데 익숙합니다. 너비가 넓어 많은 공간을 절약 할 수 있습니다.

<!-- This is only for the mobile site --> 
<script> 
$(document).ready(function() { 
if ($(window).width() < 500) { 
    $('#newsTabsControl li:nth-child(1) a').text('1'); 
    $('#newsTabsControl li:nth-child(2) a').text('2'); 
    $('#newsTabsControl li:nth-child(3) a').text('3'); 
    $('#newsTabsControl li:nth-child(4) a').text('4'); 
    $('#newsTabsControl li:nth-child(5) a').text('5'); 
} 
}); 
</script>

이것이 내가 생각한 유일한 방법입니다. 내 모바일 장치 (iPhone)에서 볼 때 대부분의 시간 동안 작동하지만 때로는 전혀 작동하지 않는 경우가 있습니다.

더 쉽게 만드는 방법에 대한 아이디어가 있으십니까?

출처

2012-04-19 John the Painter

CSS 미디어 쿼리를 사용할 수 있습니다.

는

자세한 내용은 여기에서 볼 수 있습니다 : http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

이 같은 마음 일에 있었다 :

HTML

<div class="desktop-menu"><!-- HTML FOR DESKTOP --></div> 

<div class="mobile-menu"><!-- HTML FOR MOBILE --></div>

CSS

.mobile-menu {display:none} 

@media only screen and (max-width: 500px) { 

.desktop-menu {display:none} 
.mobile-menu {display:inline} 

}

출처

2012-04-19 15:00:28 madflow

실제로 리소스를 제공하기 위해 답변을 업데이트했습니다. 가능할 때마다이 작업을 시도하십시오. OP는 미디어 쿼리를 검색하여 자신의 현재 위치와 사용 방법에 대한 완전히 잘못된 아이디어를 얻을 수 있습니다. – rlemon

음, JS를 포함하기 위해 CSS 미디어 쿼리를 사용할 수 없습니다. –

@ 리차드 질문은 "이 작업을보다 쉽게 만드는 방법에 대한 아이디어가 있습니까?" 당신은 JS없이 목표를 달성 할 수 있습니다. – madflow

모바일에서 jQuery를 실행하는 경우

답변

관련 문제