получить ширину экрана в javascript-переменную и отправить ее через ajax на php-страницу, чтобы избежать загрузки страницы

Я не уверен, понял ли я вашу проблему, но это то, что у меня есть: если вы только намереваетесь получить ширину экрана, а затем установите класс, я откажу вам в этом. Это не приятно, и в будущем, если вам нужно изменить макет страницы, вы будете обречены на то, что все эти эхо в php и вы избежите много перенаправления (index.html -> process.php -> index.php ).

В вашем примере вы можете сделать все это в Javascript.

Это пример с JQuery

 var width = $(window).width(); //get the width of the screen $('#Wrapper').css("width",width); //set the width to the class 

Если идея касается очень разных разрешений экрана (от ПК до SmartPhones), вам следует рассмотреть возможность изменения вашего подхода.

Удачи 🙂

ПОПРОБУЙТЕ ЭТО: (Я считаю, что вы хотите)

Вы можете сделать это только с помощью JS и CSS. Вот пример:

установите стиль для вашего поля тела и вашего тестового div:

 <style type="text/css"> body { margin: 0px 0px 0px 200px; } .divForTesting { width: 250px; border: 1px solid green; height: 100px; float: left; } </style> 

затем добавьте этот скрипт:

 <script> // get the screen width var width = $(window).width(); // get the number of pixels left in the screen (which is the width // minus the margin you want, rest by 250px which is the "inner boxes" width) var size = (width - 200) % 250; // then re-set the margin (the "-10" is because you'll need extra space // for borders and so on) $('body').css("margin-left",200+(size-10)); </script> 

и протестируйте его с помощью этого html:

 <!-- I've aligned the outter div to the right --> <div style="border: 1px solid red; float:right;" id="test"> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> <div class="divForTesting">test</div> </div> 

Он работает в разных разрешениях.

Попробуй 🙂

Я, наконец, получаю решение по своему собственному вопросу 🙂

 <script type="text/javascript"> var width = screen.availWidth; var fwidth = (width - 270); var i, k = 0; var j =2; for (i=1; i<=j; i++) { fwidth = fwidth - 220; if (fwidth < 220) { j = j -1; } else { k = k + 1; j = j + 1; } } var containerwidth = (width - (fwidth + 10)); var contentwidth = containerwidth - 250; document.write('<style type="text/css"> .container {width:' + containerwidth + 'px; } .mainContent { width:' + contentwidth + 'px; } </style>'); </script> 

Где contentwidth – это серый контент, а #Wrapper containerwidth – #Wrapper по #Wrapper вопросу …

Вы можете использовать javascript lib, например jQuery. Вместо:

 window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height; 

Вы можете позвонить:

 $.get("http://localhost/main.php?width=" + width + "&height=" + height, function(data, textStatus, jqXHR) { // replace the html body with the output of main.php $('body').html(data); // you might want to customize that }); 

Документация функции $ .get () jQuery .