«если windows.width меньше чем» не работает

У меня этот код, и я пытаюсь заставить его работать.«если windows.width меньше чем» не работает

В общем случае, если экран имеет ширину менее 480 пикселей, он изменяет высоту #page div и центрирует ее по вертикали. Иначе, если ширина шире, она просто центрирует его по вертикали.

jQuery(document).ready(function(){ 
var wwidth = jQuery(window).innerWidth(); 
    if (wwidth <= 480) { 
    function thirty_pc() { 
    var height = jQuery(window).innerHeight(); 
    var thirtypc = ((95 * height)/100) - 40; 
    var topmargin = (height - thirtypc - 40)/2; 
    thirtypc = parseInt(thirtypc) + 'px'; 
    topmargin = parseInt(topmargin) + 'px'; 
    jQuery("#page").css('height',thirtypc); 
    jQuery("#page").css('margin-top',topmargin); 
    } 

    thirty_pc(); 
    jQuery(window).bind('resize', thirty_pc); 

    } else { 
    function thirty_pc() { 
    var height = jQuery(window).innerHeight(); 
    var pageheight = jQuery("#page").height() 
    var thirtypc = (height - pageheight - 60); 
    var topmargin = (thirtypc/2); 
    thirtypc = parseInt(thirtypc) + 'px'; 
    topmargin = parseInt(topmargin) + 'px'; 
    jQuery("#page").css('margin-top',topmargin); 
    } 

    thirty_pc(); 
    jQuery(window).bind('resize', thirty_pc); 
}});

Однако он не срабатывает, когда windows.width составляет менее 480 пикселей ... непонятно почему.

источник

2015-01-15 frafor

Что случилось с использованием только окна window.innerWidth? – frenchie

изменен, он тоже не работает. Только инструкция «else» применяется, как если бы innerWidth был шире. – frafor

Необходимо связать событие изменения размера раньше.

И ваш код беспорядок. Пожалуйста, уберите его, чтобы вы могли видеть ошибки быстрее.

Попробуйте это:

jQuery(document).ready(function() { 

    function thirty_pc() { 
    var wwidth = jQuery(window).width(); 
    if (wwidth <= 480) { 
     var height = jQuery(window).innerHeight(); 
     var thirtypc = ((95 * height)/100) - 40; 
     var topmargin = (height - thirtypc - 40)/2; 
     thirtypc = parseInt(thirtypc) + 'px'; 
     topmargin = parseInt(topmargin) + 'px'; 
     jQuery("#page").css('height',thirtypc); 
     jQuery("#page").css('margin-top',topmargin); 
     console.log('under 480px'); 
    } else { 
     var height = jQuery(window).innerHeight(); 
     var pageheight = jQuery("#page").height(); 
     var thirtypc = (height - pageheight - 60); 
     var topmargin = (thirtypc/2); 
     thirtypc = parseInt(thirtypc) + 'px'; 
     topmargin = parseInt(topmargin) + 'px'; 
     jQuery("#page").css('margin-top',topmargin); 
     console.log('over 480px'); 
    } 
    } 

    jQuery(window).bind('resize', thirty_pc); 
});

источник

2015-01-15 13:08:36 roNn23

Как бы то ни было, он работает, только если вы изменяете размер окон, лучше работает с небольшими изменениями. Отправлено. – frafor

Когда этот код поможет вам с вашим вопросом, было бы неплохо, если бы вы установили его как правильный ответ, пожалуйста. И что вы изменили? Вы только что удалили console.log и отступы ... И вы установили wwidth вне функции. Таким образом, вы не можете получить последнюю ширину окна при изменении размера браузера. – roNn23

Я думаю, что вы его отредактировали, пока я уже пытался, обновляюсь позже :) Когда я его использовал, он отсутствовал и другие незначительные изменения синтаксиса, такие как отсутствующий вызов тридцати_pc(); before (window) .bind (без этого вызова он работает, когда u изменяет размер только окон, а не на готовом документе) – frafor

Код вывешен roNn23 хорошо работает с несколькими (незначительные) изменения, а именно:

jQuery(document).ready(function() { 
    function thirty_pc() { 
    var wwidth = jQuery(window).width(); 
     if (wwidth <= 480) { 
     var height = jQuery(window).height(); 
     var thirtypc = ((95 * height)/100) - 40; 
     var topmargin = (height - thirtypc - 40)/2; 
     thirtypc = parseInt(thirtypc) + 'px'; 
     topmargin = parseInt(topmargin) + 'px'; 
     jQuery("#page").css('height',thirtypc); 
     jQuery("#page").css('margin-top',topmargin); 
     } else { 
     var height = jQuery(window).innerHeight(); 
     var pageheight = jQuery("#page").height() 
     var thirtypc = (height - pageheight - 60); 
     var topmargin = (thirtypc/2); 
     thirtypc = parseInt(thirtypc) + 'px'; 
     topmargin = parseInt(topmargin) + 'px'; 
     jQuery("#page").css('margin-top',topmargin); 
     } 
     } 
thirty_pc();  
jQuery(window).bind('resize', thirty_pc); 
});

Теперь я пытаюсь удалить немного вертикальная прокрутка, которая появляется на моем смартфоне!

источник

2015-01-15 13:22:46 frafor

Чтобы сообщить вам: значения -40 и -60 предназначены для компенсации заполнения в CSS;) – frafor

Это запустит событие изменения размера окна. Вместо jquery используйте window.innerWidth.

$(document).ready(function() { 
    $(window).on('resize', moveDiv); 
}); 
function moveDiv() { 
    if (window.innerWidth < 481) { 
     //do something 
    } 
}

источник

2015-01-15 13:34:18 ThisClark

«если windows.width меньше чем» не работает

ответ

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