반응형 제작시
본문
코더하시는분들 혹시 반응형 제작시 어떻게 작업하시나요?
( ※ 스킨X, 테마X, 부트스트랩을 사용X )
예전에 어디 블로그에 있던 방법을 사용하고는 있었는데,
글이 삭제되어서 이 방법을 써도 되는지 여쭈어보고 싶어요.
★ www/config.php 138번줄(false로 변경)
define('G5_USE_MOBILE', false);
★ www/common.php 566번줄/549번줄(제거,주석)
if (G5_USE_MOBILE) { // <<<<<<<<<<<<< 이 부분
if ($_REQUEST['device']=='pc')
$is_mobile = false;
else if ($_REQUEST['device']=='mobile')
$is_mobile = true;
else if (isset($_SESSION['ss_is_mobile']))
$is_mobile = $_SESSION['ss_is_mobile'];
else if (is_mobile())
$is_mobile = true;
} // <<<<<<<<<<<<<< 이 부분
★ www/common.php 591번줄/575번줄(제거,주석)
/*
if (G5_IS_MOBILE) {
$board_skin_path = get_skin_path('board', $board['bo_mobile_skin']);
$board_skin_url = get_skin_url('board', $board['bo_mobile_skin']);
$member_skin_path = get_skin_path('member', $config['cf_mobile_member_skin']);
$member_skin_url = get_skin_url('member', $config['cf_mobile_member_skin']);
$new_skin_path = get_skin_path('new', $config['cf_mobile_new_skin']);
$new_skin_url = get_skin_url('new', $config['cf_mobile_new_skin']);
$search_skin_path = get_skin_path('search', $config['cf_mobile_search_skin']);
$search_skin_url = get_skin_url('search', $config['cf_mobile_search_skin']);
$connect_skin_path = get_skin_path('connect', $config['cf_mobile_connect_skin']);
$connect_skin_url = get_skin_url('connect', $config['cf_mobile_connect_skin']);
$faq_skin_path = get_skin_path('faq', $config['cf_mobile_faq_skin']);
$faq_skin_url = get_skin_url('faq', $config['cf_mobile_faq_skin']);
} else {
$board_skin_path = get_skin_path('board', $board['bo_skin']);
$board_skin_url = get_skin_url('board', $board['bo_skin']);
$member_skin_path = get_skin_path('member', $config['cf_member_skin']);
$member_skin_url = get_skin_url('member', $config['cf_member_skin']);
$new_skin_path = get_skin_path('new', $config['cf_new_skin']);
$new_skin_url = get_skin_url('new', $config['cf_new_skin']);
$search_skin_path = get_skin_path('search', $config['cf_search_skin']);
$search_skin_url = get_skin_url('search', $config['cf_search_skin']);
$connect_skin_path = get_skin_path('connect', $config['cf_connect_skin']);
$connect_skin_url = get_skin_url('connect', $config['cf_connect_skin']);
$faq_skin_path = get_skin_path('faq', $config['cf_faq_skin']);
$faq_skin_url = get_skin_url('faq', $config['cf_faq_skin']);
}
*/
★ www/theme/basic/head.sub.php
$g5['title'] = strip_tags($g5['title']); 위에 밑에 추가
// 추가
$ccz_is_mobile = is_mobile();
define('CCZ_IS_MOBILE', $ccz_is_mobile);
★ www/theme/basic/head.sub.php <meta charset="utf-8"> 밑에 복붙
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
/*
if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=edge">'.PHP_EOL;
}*/
if (CCZ_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=no">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=edge">'.PHP_EOL;
}
if($config['cf_add_meta'])
echo $config['cf_add_meta'].PHP_EOL;
★ www/theme/basic/head.sub.php 주석후 CCZ_IS_MOBILE 추가
/*
if(G5_IS_MOBILE) {
add_javascript('<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>', 1); // overflow scroll 감지
}
*/
if(CCZ_IS_MOBILE) {
echo '<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>'.PHP_EOL; // overflow scroll 감지
}
?>
답변 3
원본은 수정할 필요 없습니다.
define('G5_USE_MOBILE', false);로도 충분합니다.
head.sub.php 부분만 적용해도 될듯합니다.
저는 bootstrap은 무조건 사용할듯 하네요.
구형브라우저도 생각한다면 3.x 대 버전을 사용하면 됩니다.
편하신대로 작업 하시면 됩니다만 위에처럼 복잡하게 할 필요는 없습니다
theme.config.php에서 pc, 모바일 둘 중 하나만 강제 하는 설정이 있으므로
해당 부분만 변경 후 처리하시고 선택하신 pc스킨, 또는 모바일 스킨만 편집하면 됩니다
모바일과 pc의 구현 로직이 다른, 예를 들면 결제의 경우에만 따로 분기처리 하시면 됩니다.
두 분 답변 감사드려요!
혹시 코더하시는분들이신지??? 질문 하나 더하고싶어서요
<style>
div {position:relative;}
#iframe_page {position:absolute;top:0;left:0;}
</style>
<div>
<iframe src="https://naver.com" width="100%" height="100%" id="iframe_page"></iframe>
</div>
이런식으로 하는게 맞나요? height가 100% 가 안돼요..!
스크립트를 이용해야하나요?
!-->