Question

I am making a simple responsive website for a client, on the home page it has an full-width infinite scrolling slider which is obviously also responsive.

The slider (obviously) sets the width of the < li > elements to the width of the screen, and sets the container to the width of the li * quantity, and this works wonderfully
… Until I load open it on my Android phone.

To achieve the responsive design, I am using simple media queries, which work great as well… Except on my phone.

When I open the website on my phone, instead of it it scaling the page to fit, and fixing the widths of the li elements, my phone decides to use the normal style sheet and also has the slider li elements set to a width of around 1400px each, and the overflow hidden on the container also doesn’t work.

I am using the default browser on a Samsung Galaxy Ace, Android 2.3.3

My 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});

        });
}

My Media Queries are stored at the bottom of my CSS file.

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

}

The Website:

http://ethercreative.net/verdant

Answer 1

Most browsers scale pages to fit, so you will have to force the width and zoom to be 1.
Try this metatag, usually that solves the problem:

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

Since you are using a sidescroller, the width property might cause a problem (clipping backgrounds etc.) So you could try to run it without too.

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

See what works best.