화면 크기 정보를 php 로 넘기기
본문
해상도 1040px 이상일때
<div class="aaa">
<div class="ccc">123</div>
</div>
<div class="bbb">777</div>
해상도 1040px 미만일때는 아래와 같이 <div class="aaa">와 </div> 를 숨기려고 합니다.
<div class="ccc">123</div>
<div class="bbb">777</div>
php 코드로는 화면 해상도 구현이 안된다고 하더군요
구글링을 해보면 jQuery 또는 javascript를 이용해서 화면크기를 받은후 그것을 php 변수로 넘겨야 할텐데...
어떤 문서를 보니 ajax 와 json 을 이용해서 post 로 넘기고 그것을 다시 받아와서 넣으라고도 하네요
해결에 큰도움을 주시는 분께 커피쿠폰을 넉넉하게 보내드리겠습니다.
여러분 도와주세요 ㅠㅠ
답변 5
<script >
function callwin(){
var w = $(window).width();
var h = $(window).height();
var url= "aa.php?w="+w+"&h="+h;
//그외 파라메터도 이곳에
var win= window.open(url,"pop","widht=600,height=800");
}
</script>
이미 창이떠있다면 이렇게 하면됩니다. 만약 창크기변경에 따라 연동시킨다면 ajax 가 낫겠지만.....
그런데 쓰신 내용봐선 그냥 미디어쿼리 css 사용하심이....
<div class="tt">
<div class="aaa">
<div class="ccc">123</div>
</div>
<div class="bbb">777</div>
</div>
<div class="tt2">
<div class="ccc">123</div>
<div class="bbb">777</div>
</div>
<style>
@media screen and (min-width: 1040px) { .tt{display:block} .tt2{display:none} }
@media screen and (max-width: 1039px) {
.tt{display:none}
.tt2{display:block}
}
</style>
이런식이면 페이지 리플래쉬없이 해상도에 따라 동작합니다
미디어쿼리를 활용하기 어려우면 아래와 같은 방법으로 하시면됩니다
<script>
$.ajax({
type: "post",
url: "window.php",
data: {
"width" : window.innerWidth,
},
dataType: "json",
success: function (d) {
if(d.width>=1040){
//이상일때
}else{
//이하일때
}
}
});
</script>
<?php
$width = $_POST['width'];
echo '{"width" : "'.$width.'"}';
?>
한번 웹브라우저에 뿌린 내용을 ajax로 받아 php변수로 넣을 수는 없습니다.
물론 웹브라우저의 정보를 javascript로 알아 내서 ajax로 php로 보내 저장하거나 세션으로
만들어 참조할 수는 있겠죠.
이런 경우에는 그냥 아래 처럼 처리하시는 것이 좋을 듯 싶네요.
<!--테스트 CSS-->
<style>
.aaa { font-weight:bold;font-size:2em; }
.ccc { color:red; }
</style>
<div class="bbb">777</div>
<script>
$(function() {
alert("넓이: "+$(window).width());
if($(window).width() > 1040) {
$( '<div class="aaa"><div class="ccc">123</div></div>' ).insertBefore( ".bbb" );
} else {
$( '<div class="ccc">123</div>' ).insertBefore( ".bbb" );
}
});
</script>
결과적으로 달성하고자 하는 목적이,
특정 해상도 이상과 미만일 때,
특정 div 영역을 화면 상에 보여주지 않고자 하는 것으로 보입니다.
간단하게 미디어쿼리 사용하시면 해결될 것 같습니다.
@kkama9 님께서 작성하여 주신 소스 참조하시면 될 것 같습니다.