페이지 데스크탑 및 모바일 수정 했는데 모바일버전이 이상해요...

페이지 데스크탑 및 모바일 수정 했는데 모바일버전이 이상해요...

QA

페이지 데스크탑 및 모바일 수정 했는데 모바일버전이 이상해요...

본문

파랑이 데스크탑 index.php 파일

주황이 mobile index.php 파일 입니다.

 

맨 밑에 부분 말고는 다 똑같이 입력 했어요.

그리고 이미지도 각 폴더에 똑같이 넣었구요.

CSS 파일도 모바일과 디폴트 파일 내부에 똑같이 작성 했습니다.

CSS는 모바일 이미지 경로만 img/mobile/ 이처럼 모바일만 추가 했는데

데스크탑에서는 이미지가 정상적으로 나오는데 모바일에서는 이미지가 안나오는데 왜 이런거죠...

 

핸드폰에서 morrie27.cafe24.com 들어가시면 회색 바탕에 글씨만 나오고 있어요...

데스크탑에선 배경도 나오는데... 왜 이런거죠...

 

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8"/>
    <title>test</title>
    <link href="
" rel="stylesheet">
    <link href="style.css" rel="stylesheet" />

  </head>
  <body>

    <div>
      <div id="main">
        <div id="contents">
          <h1>Simple, One Page Design</h1>
          <p>A free lading page theme with video background</p>
          <a href="#">Get started</a>
        </div>
      </div>
    </div>

      <div id="main-1">
      </div>
      <div id="main-2">
      </div>
      <div id="main-3">
      </div>
      <div id="main-4">
      </div>

  </body>
</html>

<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/index.php');
    return;
}

include_once(G5_THEME_PATH.'/head.php');
?>

<?php
include_once(G5_THEME_PATH.'/tail.php');
?>

 

 

 

 

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8"/>
    <title>test</title>
    <link href="
" rel="stylesheet">
    <link href="style.css" rel="stylesheet" />

  </head>
  <body>

    <div>
      <div id="main">
        <div id="contents">
          <h1>Simple, One Page Design</h1>
          <p>A free lading page theme with video background</p>
          <a href="#">Get started</a>
        </div>
      </div>
    </div>

      <div id="main-1">
      </div>
      <div id="main-2">
      </div>
      <div id="main-3">
      </div>
      <div id="main-4">
      </div>

  </body>
</html>

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_THEME_MOBILE_PATH.'/head.php');
?>

<?php
include_once(G5_THEME_MOBILE_PATH.'/tail.php');
?>

 

 

모바일 CSS 파일 입력한거예요.

 

html, body{
  margin:0;
  padding: 0;
}

h1, p{
  margin:0;
}

a{
  color: inherit;
  text-decoration: none;
}

#main{
  background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  font-family: 'Questrial', sans-serif;
}

#contents{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width:100%;
  color: white;
  text-align: center;
}

#contents h1{
  font-family: 'Dancing Script', cursive;
  font-size: 70px;
  margin-bottom: 16px;
}

#contents p{
  font-size: 23px;
  margin-bottom: 16px;
}

#contents a{
  display: inline-block;
  border:2px solid white;
  border-radius: 20px;
  padding:10px 20px;
  font-size: 17px;
  font-weight: bold;
  transition: all 0.5s;
}

#contents a:hover{
  background-color: red;
}

@media(max-width:769px){
  #contents h1{
    font-size: 50px;
  }

  #contents p{
    font-size: 20px;
  }

  #contents a{
    font-size: 14px;
  }
}

#main-1{
  background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-1.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
  font-family: 'Questrial', sans-serif;
}

#main-2{
  background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-2.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
  font-family: 'Questrial', sans-serif;
}

#main-3{
  background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-3.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
  font-family: 'Questrial', sans-serif;
}

#main-4{
  background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-4.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
  font-family: 'Questrial', sans-serif;
}

 

이 질문에 댓글 쓰기 :

답변 3

제 폰에선 모바일도 PC처럼 잘 나옵니다.

모바일 브라우저 설정에서 캐시 삭제하고 새로고침해보세요.

http://troy.labs.daum.net/

위 사이트에서 테스트 시도 결과, 정상적으로 나옵니다.

작은별 님 말씀처럼 모바일 브라우저의 캐시를 삭제한 뒤, 다시 시도하여 보세요.

저도 제대로 보입니다~

테스트로 사용하신 폰의 종류가 어찌되시나요~

답변을 작성하시기 전에 로그인 해주세요.
전체 23
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT