1

私はクライアントのためにシンプルなレスポンシブウェブサイトを作成しています。ホームページには、明らかにレスポンシブでもある全幅の無限スクロールスライダーがあります。

スライダーは（明らかに）<li>要素の幅を画面の幅に設定し、コンテナーをli*量の幅に設定します。これはうまく機能します...Android携帯でロードして開くまで。

レスポンシブデザインを実現するために、私は単純なメディアクエリを使用していますが、これもうまく機能します...私の電話を除いて。

携帯電話でウェブサイトを開くと、ページを拡大縮小してli要素の幅を固定する代わりに、携帯電話は通常のスタイルシートを使用することを決定し、スライダーのli要素を約の幅に設定します。それぞれ1400pxで、コンテナに隠されているオーバーフローも機能しません。

Samsung Galaxy Ace、Android2.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 に答える