홈페이지 메인페이지를 테마사용안하고 꾸몄습니다
근데.. 이게 웹에서는 잘나오는데 모바일로는 사이즈가 맞지않게 나옵니다..
어떤걸 적용시켜야하는지와 어떤 글을 봐야 도움이되는지가 궁금합니다..
답변 6개
테마를 사용하지 않더라도 그누에는 기본 모바일 스킨이 있어서 PC와 별개로 보일텐데요..
URL 을 남겨주시면 저 포함 다른분들이 답변주시는데 더 도움될것 같네요.
해당 소스로는 CSS 가 보이지 않아 방법을 찾을수 없습니다.
아직 해결 안되셨으면 쪽지로 URL 남겨주세요.
한번 확인해드릴께요.
index.php 와 head.php 보다는 css를 수정해 반응형으로 만들어야하는거같은데요
------- index.php 입니다
<?php
include_once('./_common.php');
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/index.php');
return;
}
if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_PATH.'/head.php');
?>
<section class="section-1">
<div class="talk-box">
<form action="" class="reservation">
<div class="re-1">
<div>여행도시</div>
<input type="text">
</div>
<ul class="row">
<div class="re-2">
<div>출발도시</div>
<input type="text">
</div>
<div class="re-3">
<div>출발일</div>
<input type="text">
</div>
</ul>
<div class="re-4">
<div>상품명/상품코드 검색</div>
<input type="text">
</div>
<ul class="row re-5">
<li class="cell">
<div>출발요일</div>
</li>
<li class="cell-right">
<label for="a">평일</label><input type="checkbox" id="a">
<label for="b">주말 및 공휴일</label><input type="checkbox" id="b">
</li>
</ul>
<a href="https://open.kakao.com/o/sbWr4mmb" >
<div class="img-box"><img src="/img/kakao.png" alt=""></div>
</a>
</form>
</div>
<div class="my-1 owl-carousel owl-theme">
<div class="item" style="background-image:url(/img/slider/slider-1.jpg);" class="active"></div>
<div class="item" style="background-image:url(http://cfile22.uf.tistory.com/image/2735284453E67E8E20EF9A);"></div>
<div class="item" style="background-image:url(http://www.welcometojapan.or.kr/jnto_author/article/112/009.jpg);"></div>
</div>
</section>
<section class="section-2 con">
<h3>BEST 인기 상품</h3>
<ul class="row">
<li class="cell">
<div class="img-box">
<img src="/img/amazing_show/3.jpg" alt="">
<div class="sub-text"><span>지기네<br>파티호핑</span></div>
<div class="line-box">
<div></div>
<div></div>
</div>
</div>
</li>
<li class="cell">
<div class="img-box">
<img src="/img/massage/2.jpg" alt="">
<div class="sub-text">
<span>지기네<br>힐링호핑</span>
</div>
<div class="line-box">
<div></div>
<div></div>
</div>
</div>
</li>
</ul>
</section>
<?php
include_once(G5_PATH.'/tail.php');
?>
<script src="index.js"></script>
<script src="lib.js"></script>
-----------------------------------------------------------------------
head.php 입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/head.php');
return;
}
if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/head.php');
return;
}
include_once(G5_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_LIB_PATH.'/tail.php');
?>
<!-- 모바일에서 화면배율을 디바이스 크기 기준으로 설정 -->
<!-- 이게 안되면 pc에서의 100px과 모바일에서의 100px이 디바이스 성능에 따라 달라집니다. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- owl 캐러셀 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="/lib.css">
<link rel="stylesheet" href="/index.css">
<header class="con">
<div class="hd-top row">
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<label for="sch_stx" class="sound_only">검색어 필수</label>
<input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="검색어를 입력해주세요">
<button type="submit" id="sch_submit" value="검색"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button>
</form>
<h1>
<a href="http://testjk.event-on.net/">
<div class="img-box"><img src="/img/logo.gif" alt="로고이미지"></div>
</a>
</h1>
<ul class="row">
<?php
if($member['mb_id'] == null){
?>
<li class="cell" id="login"><a href="http://testjk.event-on.net/bbs/login.php">로그인</a></li>
<li class="cell"><a href="http://testjk.event-on.net/bbs/password_lost.php">아이디/비밀번호찾기</a></li>
<li class="cell"><a href="http://testjk.event-on.net/bbs/register.php">회원가입</a></li>
<?php
}
?>
<?php
if($member['mb_id'])
{
?>
<li class="cell"><a href="http://testjk.event-on.net/bbs/logout.php">로그아웃</a></li>
<li class="cell"><a href="http://testjk.event-on.net/bbs/member_confirm.php?url=register_form.php">마이페이지</a></li>
<?php
}
?>
</ul>
</div>
<div class="hd-bottom">
<div class="menu-ico" data-ico-now-animating="N">
<div></div>
<div></div>
<div></div>
</div>
<ul class="row">
<li class="cell"><a href="http://testjk.event-on.net/bbs/board.php?bo_table=rr">자주 찾는 질문</a></li>
<li class="cell"><a href="http://testjk.event-on.net/bbs/board.php?bo_table=table">문의하기</a></li>
<li class="cell"><a href="http://testjk.event-on.net/bbs/board.php?bo_table=table2">공지사항</a></li>
<li class="cell"><a href="http://testjk.event-on.net/bbs/board.php?bo_table=table3">고객의 소리</a></li>
</ul>
</div>
</header>
<script>
function fsearchbox_submit(f)
{
if (f.stx.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.stx.select();
f.stx.focus();
return false;
}
// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
var cnt = 0;
for (var i=0; i<f.stx.value.length; i++) {
if (f.stx.value.charAt(i) == ' ')
cnt++;
}
if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
return true;
}
</script>
반응형으로 만들어진 것이 아니라면 pc스킨, mobile스킨 각각 만들어야 합니다.
소스나 조금은 구체적인 질문을 해주셔야 답변을 해줄 수 있을듯하네요.
답변을 작성하려면 로그인이 필요합니다.