Android 2.3.3忽略媒體查詢和jQuery

Question

我正在爲一個客戶端做一個簡單的響應式網站，在主頁上它有一個全角無限滾動滑塊，它顯然也是響應式的。

滑塊（顯然）將元素的寬度設置爲屏幕的寬度，並將容器設置爲li *數量的寬度，並且這種方式非常有效 ...直到我加載open它在我的Android手機上。

爲了實現響應式設計，我使用簡單的媒體查詢，這除了我的手機上工作的偉大，以及...。

當我在手機上打開網站而不是它縮放頁面以適應並固定li元素的寬度時，我的手機決定使用正常樣式表，並且還將滑塊li元素設置爲每個寬度大約1400px，並且容器上隱藏的溢出也不起作用。

我使用在三星Galaxy王牌默認的瀏覽器，安卓2.3.3

我的jQuery

$(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}); 

     }); 
} 

我的媒體查詢存儲在我的CSS文件的底部。

@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;} 

} 

網站：

http://ethercreative.net/verdant 

Answer 1

大多數瀏覽器縮放頁面以適應，所以你必須強制寬度和縮小爲1 試試這個元標記，通常是解決了這個問題：

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

由於您使用sidescroller，寬度屬性可能會導致一個問題（剪裁背景等），所以你可以嘗試運行它沒有太多。

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

看看什麼效果最好。