Android 2.3.3에서 미디어 쿼리와 jquery를 무시합니다.

Question

나는 클라이언트에 대해 간단한 반응 형 웹 사이트를 만들고 있습니다. 홈 페이지에는 분명히 반응하는 전폭 무한 스크롤 슬라이더가 있습니다.

슬라이더는 (분명히) < li> 요소의 너비를 화면 너비로 설정하고 컨테이너를 li * 수량의 너비로 설정합니다.이 기능은 훌륭하게 작동합니다. ...로드가 열리기 전까지는 안드로이드 폰에서.

반응 형 디자인을 구현하려면 간단한 미디어 쿼리를 사용하십시오. 위의 코드는 잘 작동합니다 ... 휴대 전화를 제외하고.

휴대 전화에서 웹 사이트를 열면 페이지 크기를 조정하고 li 요소의 너비를 고정하는 대신 휴대 전화가 일반 스타일 시트를 사용하기로 결정하고 슬라이더 li 요소를 너비는 각각 약 1400 픽셀이며 컨테이너에 숨겨진 오버플로도 작동하지 않습니다.

나는 내 미디어 쿼리가 내 CSS 파일의 맨 아래에 저장됩니다

$(function() { 

    //rotation speed and timer 
    var speed = 5000; 
    var run = setInterval('rotate()', speed); 

    //grab the width and calculate left value\ 
    var screenWidth = $(window).width(); 
    $("ul.slides li").css("width",screenWidth); 
    $("ul.slides li").width(screenWidth); 
    var fullWidth = $('ul.slides li').size() * $('ul.slides li').width(); 
    $('ul.slides').css('width', fullWidth); 


    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button 
    $('ul.slides li:first').before($('ul.slides li:last')); 
    $('ul.slides li:first').before($('ul.slides li:last')); 

    //set the default item to the correct position 
    $('ul.slides').css({'left' : left_value}); 

    //if user clicked on prev button 
    $('a.controls.left').click(function() { 

     //get the right position    
     var left_indent = parseInt($('ul.slides').css('left')) + item_width; 

     //slide the item    
     $('ul.slides').animate({'left' : left_indent}, 1000,function(){  

      //move the last item and put it as first item    
      $('ul.slides li:first').before($('ul.slides li:last'));   

      //set the default item to correct position 
      $('ul.slides').css({'left' : left_value}); 

     }); 

     //cancel the link behavior    
     return false; 

    }); 


    //if user clicked on next button 
    $('a.controls.right').click(function() { 

     //get the right position 
     var left_indent = parseInt($('ul.slides').css('left')) - item_width; 

     //slide the item 
     $('ul.slides').animate({'left' : left_indent}, 1000, function() { 

      //move the first item and put it as last item 
      $('ul.slides li:last').after($('ul.slides li:first'));     

      //set the default item to correct position 
      $('ul.slides').css({'left' : left_value}); 

     }); 

     //cancel the link behavior 
     return false; 

    });   

    //if mouse hover, pause the auto rotation, otherwise rotate it 
    $('ul.slides').hover(

     function() { 
      clearInterval(run); 
     }, 
     function() { 
      run = setInterval('rotate()', speed); 
     } 
    ); 

}); 


//a simple function to click next link 
//a timer will call this function, and the rotation will begin :) 
function rotate() { 
    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

     //get the right position 
     var left_indent = parseInt($('ul.slides').css('left')) - item_width; 

     //slide the item 
     $('ul.slides').animate({'left' : left_indent}, 1000, function() { 

      //move the first item and put it as last item 
      $('ul.slides li:last').after($('ul.slides li:first'));     

      //set the default item to correct position 
      $('ul.slides').css({'left' : left_value}); 

     }); 
} 

2.3.3

내 jQuery를 안드로이드 삼성 갤럭시 에이스의 기본 브라우저를 사용하고 있습니다.

@media only screen and (max-width: 767px) { 
    .container_12 { width: 300px; } 
    .container_12 . > * { margin: 0; } 

    .container_12 .grid_1, 
     .container_12 .grid_3, 
     .container_12 .grid_4, 
     .container_12 .grid_5, 
     .container_12 .grid_6, 
     .container_12 .grid_7, 
     .container_12 .grid_8, 
     .container_12 .grid_9, 
     .container_12 .grid_10, 
     .container_12 .grid_11, 
     .container_12 .grid_12 { width: 300px; margin: 0 auto; } 
    .container_12 .prefix_8 { padding-left: 0px;} 

    .container_12 .grid_2 { width: 125px; } 
    .container_12 .push_2 { left: 0; position: relative; } 

    span.phonenumber  {margin-top: 0;} 
    ul.nav     {margin: 10px 0;} 
    #main-content h1  {font-size: 18px; line-height: 1.4;} 
    div.grid_4.twitter  {margin-top: 40px;} 
    a.button    {display: block;} 
    #footer, #footer .tr {font-size: small; text-align: center !important;} 
    #slider, #slider li  {height: 400px; width: 320px;} 
    #slider .meta   {height: auto; padding: 10px; width: 280px; text-align: center; bottom: 120px;} 
    #slider .meta .title, #slider .meta .date, #slider .meta .location {margin-right: 10px;} 
    .controls-box {width: 100%;margin: 10px auto;} 
    #slider .meta .controls.left {float: left;} 
    #slider .meta .controls.right {float: right;} 
    .article p {font-size: 16px;} 
    #intro-content h3 p {font-size: 18px;} 
    .contact {margin-bottom: 40px;float: left;} 
    input[type="submit"] {background-position: 30px;} 
    .grid_2.tr {text-align: left;} 
    .grid_2.tr label {top:0;} 

} 

웹 싸이트 :이 메타 태그를 시도 1. 을 할 폭을 강제로 확대해야 할 것이다, 그래서

http://ethercreative.net/verdant 

Answer 1

대부분의 브라우저는,에 맞게 페이지 크기를 조정은, 일반적으로 그 문제를 해결 :

너비 컨트롤을 사용하고 있기 때문에 너비 속성을 사용하면 문제가 발생할 수 있습니다 (예 : 배경이 잘리는 등).

<meta name="viewport" id="viewport" content="initial-scale=1.0" /> 

효과가있는 부분을 확인하십시오.