1

我正在为客户制作一个简单的响应式网站，在主页上它有一个全角无限滚动滑块，显然也是响应式的。

滑块（显然）将 <li> 元素的宽度设置为屏幕宽度，并将容器设置为 li * 数量的宽度，这非常有效......直到我在我的 Android 手机上加载打开它.

为了实现响应式设计，我使用了简单的媒体查询，效果也很好……除了在我的手机上。

当我在手机上打开网站时，我的手机决定使用普通样式表并将滑块 li 元素的宽度设置为大约每个1400px，隐藏在容器上的溢出也不起作用。

我在三星 Galaxy Ace 上使用默认浏览器，Android 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
4

1 回答 1

2

大多数浏览器会缩放页面以适应，因此您必须强制宽度和缩放为 1。试试这个元标记，通常可以解决问题：

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

由于您使用的是横向卷轴，因此 width 属性可能会导致问题（剪切背景等），因此您可以尝试在没有的情况下运行它。

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

看看什么效果最好。

于 2012-08-19T15:45:10.740 回答