Улучшите код, чтобы сделать div, чтобы заполнить ширину браузера

Question

Мне удалось создать этот код, чтобы div.full_width_no_padding полностью заполнил ширину браузера. Он отлично работает в настольных браузерах, но он не работает на мобильных устройствах, таких как iphone, nexus и т. Д.

Есть ли другой способ сделать это?

JS

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

    $(".full_width_no_padding").width($(window).width()); 
    var marginLeft = ($(window).width() - $('#region-content').width())/2; 
    $(".full_width_no_padding").css("margin-left", -marginLeft); 

    $(window).on('resize', function(){ 
     $(".full_width_no_padding").width($(window).width()); 
     var marginLeft = ($(window).width() - $('#region-content').width())/2; 
     $(".full_width_no_padding").css("margin-left", -marginLeft); 
    }); 

    }); 
}(jQuery)); 

HTML

<div id="region-content" style="width:960px"> 
    <div class="full_width_no_padding" >content here</div> 
</div> 

Answer 1

Вы должны позволить этот код выполнить после того, как DOM будет готов, если вы не сделаете этого код может быть выполнен до DOM готова и то изменения не будут применяться, потому что ваш код не может найти элементы в DOM.

В JQuery легко, вы просто обернуть свой код в $(function() { <code here> }); блоке, так что вы получите:

$(function() { 

    $(".full_width_no_padding").width($(window).width()); 
    var marginLeft = ($(window).width() - $('#region-content').width())/2; 
    $(".full_width_no_padding").css("margin-left", -marginLeft); 
    $(window).on('resize', function(){ 
     $(".full_width_no_padding").width($(window).width()); 
     var marginLeft = ($(window).width() - $('#region-content').width())/2; 
     $(".full_width_no_padding").css("margin-left", -marginLeft); 
    }); 

}); 

Для получения дополнительной информации см: https://api.jquery.com/ready/

Answer 2

Я объясню это очень просто шаги:

1- Удалить, что Javascript.

2- Добавьте это в CSS:

body,html{padding:0;margin:0;} 

3- Убедитесь, что все это родители width:100%.
Как правило, вы можете предположить, что все элементы уровня блока имеют (по умолчанию) width:100%.

4- Прибыль!