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" /> 

看看什么效果最好。