브라우저 창크기에 반응해서 php로 값을 표현하는 것이 필요합니다.
관련링크
본문
브라우저의 크기가 변할때 마다 브라우저의 넓이값을 php 변수에 넘기려 합니다.
<?php
$myWidth = '<script> document.write(window.innerWidth); </script>';
echo $myWidth; // 이값을 화면 여러곳에서 사용하려합니다.
?>
이렇게 하면 창크기에 따라서 브라우저 넓이를 표시가 가능하더군요.
마우스로 브라우저 크기를 변경하면 실시간 대응이 되지 않고
새로고침을 하면 변경된 값이 표시가 됩니다.
창의 크기를 변경하면 즉각 즉각 그것의 값을 php 변수 값으로 사용하려면 ajax 를 활용해야 겠죠?
제 지식이 미천하여 ajax 와 어떻게 연계하면 좋을지 도통 감이 안오네요.
답변 3
어떤용도로 활용하실지 모르겠지만 효율이 좋지 않습니다
리사이즈 이벤트는 1px마다 반응하는데 줄이는 순간순간마다 ajax요청이 들어가면 단시간에 엄청난 요청을 할거라 보여집니다.
var width = window.innerWidth;
$(window).resize(function(){
if( window.innerWidth > (width + 100) ){
//ajax 구문
}
)};
1px마다 반응해야할 일이 아니라면
해상도 값이 100px 등 일정 크기 이상 변경 되었을때 수정하는것이 나을거라 보입니다
감사합니다. 원하는 결과를 얻지 못했지만, 언젠가 해결되는 날이 있겠죠.
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(function() {
$(window).on('resize', _.debounce(function() {
var w = $("body").innerWidth();
$.ajax({
url : "resize.php",
data : {
w : w
},
success : function(res) {
$("#result").text(res);
}
});
}, 400));
});
</script>
<div id="result"></div>
debounce나 throttle을 걸면 과도하게 리사이징이 되어도 괜찮습니다.
Underscore.js 추천합니다.
좋은 코드 감사합니다.
볼피드님 답변 수정
var width = $(window).width();
$(window).resize(function(){
if( Math.abs( $(window).width() - width) > 100 ){
//ajax 구문
width = $(window).width();
// window.status= width;
}
});
감사합니다. 열심히 공부하겠습니다. 아자 힘내자 힘