혹시 미디어쿼리같은걸로 1024부터 무조건 PC버전으로 가게 할 수 있나요?

혹시 미디어쿼리같은걸로 1024부터 무조건 PC버전으로 가게 할 수 있나요?

QA

혹시 미디어쿼리같은걸로 1024부터 무조건 PC버전으로 가게 할 수 있나요?

답변 2

본문

화면이 너무 커지면 모바일 화면이 여백이 너무 커서

1024부터는 무조건 PC버전으로 되도록 하고싶은데 방법 있을까요?

이 질문에 댓글 쓰기 :

답변 2

"""1024부터 무조건 PC버전으로 가게 할 수 있나요?""" 미디어 쿼리만으로는

"1024부터 무조건 PC 버전으로 가게 하는 것"은 불가능할 것입니다.

 

아래는 PC 전용 페이지로 무조건 이동(순정 그누보드)하는 예시 =

 

기존 프로제트가 반응형이 아니고

PC/모바일을 별도로 분리한 레이아웃을 제공하는 경우 - -

적응형 기반을 유지하면서,

모바일 디바이스에서 화면 크기가 1024px 이상일 경우 PC 버전을 렌더링하도록 설정하려면

사용자 에이전트와 화면 크기 조건을 조합하여 구현하시면 될 듯합니다.

 

common.php 파일의,

$_SESSION['ss_is_mobile'] = $is_mobile;

define('G5_IS_MOBILE', $is_mobile);

define('G5_DEVICE_BUTTON_DISPLAY', $set_device);

if (G5_IS_MOBILE) {

$g5['mobile_path'] = G5_PATH.'/'.G5_MOBILE_DIR;

}

이 세션 아래에 다음의 코드 추가

function is_mobile_device() {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
return preg_match('/Mobile|Android|BlackBerry|iPhone|Windows Phone|Opera Mini|IEMobile/i', $user_agent);
}
  - 사용자 에이전트(User Agent)를 기반으로 디바이스 유형을 감지

  - 기존 G5_IS_MOBILE와 조합하여 모바일 렌더링 조건을 확장.

 

head.sub.php 파일의

<script>

// 자바스크립트에서 사용하는 전역변수 선언

. . .

var g5_admin_url = "<?php echo G5_ADMIN_URL; ?>";

<?php } ?>

// 이 부분에 아래의 스크립트를 추가하세요

</script>

이 스크립트 끝 부분에 다음 JavaScript를 추가

document.addEventListener("DOMContentLoaded", function() {
    const isMobileDevice = "<?php echo G5_IS_MOBILE ? 'true' : 'false'; ?>";
    const isWideScreen = window.innerWidth >= 1024;
    if (isMobileDevice === "true" && isWideScreen) {
        // PC 버전 페이지로 강제 이동
        window.location.href = "<?php echo G5_URL; ?>";
    }
});
  - 모바일 디바이스면서 1024px 이상일 경우 PC 버전 URL로 리다이렉트.

 

*현재 리다이렉트 URL은 G5_URL로 설정되어 있습니다.

  상황에 따라 PC 전용 페이지 URL을 별도로 지정해야 할 수도 있음.

window.location.href = "<?php echo G5_URL; ?>/pc_version_page.php";

 /* 모바일 */

@media screen and (max-width: 1024px) {body { margin: 0 auto;max-width: 100%; padding: 10px;}}

/* PC */

@media screen and (min-width: 1024px) { body {max-width: 1200px; margin: 0 auto;}}

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 129,103
© SIRSOFT
현재 페이지 제일 처음으로