0

私はこのコードをjsFiddleに実装しており、デスクトップブラウザーで問題なく動作し、ある程度はモバイルデバイスで動作します。http://jsfiddle.net/heufT/

私のコードがしていること

画面の幅が960px（またはその周辺）より大きい場合は通常の水平ナビゲーションが表示されますが、画面の幅が960px未満の場合、ナビゲーションはボタンの一部になり、クリックすると垂直メニューに同じリンクが表示されます。ページをスクロールすると、ヘッダーはより低い高さに縮小され、一番上に戻ると、ヘッダーは以前と同じ高さに戻ります。ブラウザのサイズを変更した場合でも（主にデスクトップで使用するため）、これがすべて確実に行われるようにする.loadスクリプトもあります。

jQuery(document).ready(function($){

// prepend menu icon
$('nav').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
    $("ul#prim").slideToggle();
    $(this).toggleClass("active");
});

});

// Navigation resize event on scroll
$(document).scroll(function(){

if($(window).width()>959){
      $("ul#prim").addClass("adjTop");
}

if($(window).width()<958){
      $("ul#prim").removeClass("adjTop");
}

if ($(this).scrollTop()>105){
    // animate fixed div to small size:
    $('header').stop().animate({ height: 90 },50, 'linear');
    $('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');
    $('ul#prim').stop().animate({ top: 62 },50, 'linear');
    $("img.logo").fadeOut();
    $("img.bao_logo").fadeIn(1000);
} else {
    //  animate fixed div to original size
    $('header').stop().animate({ height: 175 },50, 'linear');
    $('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');  
    $('ul#prim').stop().animate({ top: 105 },50, 'linear');
    $("img.logo").fadeIn(1000);
    $("img.bao_logo").hide();
}

});

$(window).resize(function() {
if($(window).width()>959){
    $("ul#prim").addClass("adjTop");
}

if($(window).width()<958){
      $("ul#prim").removeClass("adjTop");
}

// Showreel
$(window).resize(function(){
    // Resize video to fix aspect ratio when window resizes
    // Only do this if video is currently visible
    if ($('#showreel').height()!=0){
        $('#showreel').height(($('#showreel').width()/16)*9);
    }
});
});

(function($){

// Custom scrollbars for work feature on homepage
$(window).load(function(){
    $(".scroll-pane").mCustomScrollbar({
            horizontalScroll:true,
            mouseWheel: false
    });
});

})(jQuery);​

問題

特にiPadとiPhoneで私が気付いたのは、JSは機能するが、Javascriptをピンチ/ズームすると完全に壊れ、ナビゲーションボタンが機能せず、ヘッダーの縮小/拡大も機能しないことです。

メタビューポートタグを使用してピンチ/ズームを無効にしようとしましたが、これによりユーザーは明らかにページにズームインできなくなりますが、少なくともピンチ/ズームを試みても何も起こらない場合でも、JSがまだ壊れていることに気付きました何も機能しません。

誰かがポインタを持っていますか？これを引き起こすコードにエラーはありますか？私は何かが足りないのですか？

4

1 に答える 1

0

さて、数日間テストした後、メタビューポートタグを再検討し、ユーザーのスケーラブル属性と組み合わせた最大スケール属性を追加したところ、問題は解決しました。ユーザーがピンチ/ズームを防止され、ユーザビリティに影響を与えるため、これが正しい方法であるかどうかはわかりませんが、それでもこれは短期的な解決策です。

ビューポートタグは次のようになります。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2012-10-24T23:22:08.267 に答える