혹시 미디어쿼리같은걸로 1024부터 무조건 PC버전으로 가게 할 수 있나요?
본문
화면이 너무 커지면 모바일 화면이 여백이 너무 커서
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);
}
- 기존 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; ?>";
}
});
*현재 리다이렉트 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;}}