브라우저 크기를 계산해서 DVI의 가로길이 조정하는 방법 문의
본문
<?php
include_once('./_common.php');
include_once(G5_SUPER_PATH.'/adm_head.php');
include_once(G5_SUPER_PATH.'/adm_nav.php');
?>
<script>
$(window).resize(function(){
var winWith = window.innerWidth;
if(winWith > 1200) {
document.getElementById('left_form').style.width('20%');
document.getElementById('right_form').style.width('77%');
}
else {
document.getElementById('left_form').style.width('95%');
document.getElementById('right_form').style.width('95%');
}
}).resize();
</script>
<!-- admin 메인화면 시작 -->
<!-- /#page-content-wrapper -->
<div id="page-search">
<div id="search_frame">
<!--S:검색 모듈----------------------------------------------------->
<?php include_once(G5_SUPER_PATH.'/adm_search_form.php');?>
<!--E:검색 모듈----------------------------------------------------->
</div>
<div id="body_frame">
<div id="body_inframe">
<!--빌딩 모듈--------------------------------------------------->
<?php include_once(G5_SUPER_PATH.'/module/build_info.php');?>
<!--서치 결과값 모듈-------------------------------------------->
<?php include_once(G5_SUPER_PATH.'/module/search_list.php');?>
<!--메인 모듈------------------------------------------------->
<div id="main_group">
<!--좌측 메인 모듈------------------------------------------>
<div class="left_form" id="left_form" style="width:calc(20%)">
<?php include_once(G5_SUPER_PATH.'/module/submenu0011_01.php');?>
</div>
<!--우측 메인 모듈------------------------------------------>
<div class="right_form" id="right_form" style="width:calc(77%)">
<?php include_once(G5_SUPER_PATH.'/module/submenu0011_02.php');?>
</div>
</div> <!--메인모듈-->
</div>
</div>
</div>
<?php
include_once(G5_SUPER_PATH.'/adm_tail.php');
?>
<!-- adm_메인화면 끝 -->
상단 스크립트에서 브라우저 크기를 읽어온 다음
ID값이 left_form, right_form 인 DVI 크기를 브라우저가 1200가 크면 20%, 77%로
1200보다 작으면 95% 조정하는 소스를 넣었는데..
PHP에서는 먹지가 않네요.. 변수에 브라우저 사이즈는 저장하는데 그걸 스타일에 넣질 못합니다...
php문을 먼저 처리하고 스크립트를 처리해서 그런가... 어떻게 해결해야 하는지 고수님의 조언 부탁드립니다.
감사합니다.
답변 3
참고만 해보세요...
$(function() {
var widths=$(window).innerWidth();
if(widths>1200) {
$('#left_form').css('width', '20%');
$('#right_form').css('width', '77%');
}else{
$('#left_form').css('width', '95%');
$('#right_form').css('width', '95%');
}
});
헤드에 아래의 스크립트를 넣어서 해결하였습니다.
<script>
$(window).resize(function(){
if($(window).innerWidth() < 1200) {
document.getElementById('left_form').style.width = 'calc(100%)';
document.getElementById('right_form').style.width = 'calc(100%)';
} else {
document.getElementById('left_form').style.width = 'calc(22%)';
document.getElementById('right_form').style.width = 'calc(77%)';
}
}).resize();
</script>
답변을 작성하시기 전에 로그인 해주세요.
