2012-08-24 3 views
1

У меня есть небольшая проблема, когда мое навигационное меню подходит для мобильного устройства - iphone/ipad. click here Я поставил свои свойства CSS к следующему:навигационное меню не подходит для мобильных браузеров

#wrapper{ 
    max-width: 1600px; 
    min-width: 320px; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
} 
#header{ 
    max-width: 1018px; 
    min-width: 320px; 
    width: 100%; 
    margin: 0 auto; 
} 

#social-tabs{ 
    display: block; 
    padding: 4px; 
    margin: 5px 0px; 
} 

#nav-menu{ 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1018px; 
    min-width: 320px; 
} 

Я также применить изменения размера экрана на моем сайте, но я все еще не имея никакой радости ..

function reSize($target){ 
$target.css('width', $(window).width()+'px'); 
} 
$(document).ready(function(){ 
    $(window).bind('resize', reSize($('#header'))); 
    $(window).trigger('resize'); 
}); 

Есть кто там, кто может забрать, где я иду не так?

+0

Удалите решение javascript и используйте запросы css media. – sabithpocker

+0

Argh! Я пытался найти короткий снимок – NewBoy

+0

Если у вас есть какие-либо проблемы с медиа-запросом/css, вы можете спросить, я буду рад помочь. – sabithpocker

ответ

1

При попытке связать обработчик изменения размера, вы делаете это неправильно:

$(window).bind('resize', resize.bind(window, $('#header'))); 

бы улучшить положение вещей. Ваш код, написанный , называется функцией «изменить размер». Что вам нужно сделать, так это передать ссылку на функцию. Другой (возможно, проще) эквивалент будет:

$(window).bind('resize', function() { resize($('#header')); }); 

Теперь с этим сказал, что вы все еще будете иметь проблемы. Обработка событий «изменить размер» не поможет вам на мобильном устройстве, потому что в любом случае изменение размера не происходит. Что вам действительно нужно сделать, так это расследовать CSS Media Queries и основывать свое решение в CSS, а не на JavaScript.

(Также важно отметить, что события «изменения размера» довольно быстро срабатывают на настольных браузерах, когда окно браузера изменяется в интерактивном режиме. Очевидно, что поворот телефона или планшета на бок должен срабатывать только одно событие, но на рабочем столе/портативный компьютер, браузер запускает «изменение размера» событий, когда виджет оконного угла перетаскивается, поэтому обработчики JavaScript, которые обновляют DOM, как правило, увязли довольно серьезно.)

Смежные вопросы