XE3 사이트 기본 테마를 선택하면, 스마트폰에서 화면 확대가 되지 않습니다.
기본적으로 모두 그렇게 제작된듯 합니다.
이 문제를 해결하는 방법 입니다.
예시 테마는 DevRyan Theme 입니다.
아래 경로에서 theme.blade.php 파일을 수정 해야 합니다.
파일 경로는 XE3 설치폴더 / plugins/ devryan/ Components/ Themes/ Devryan/ views
FTP 프로그램으로 다운로드 한후, 메모장 또는 에디터 프로그램으로 열기 합니다.
삭제해야할 부분,(대략 24번째 줄 )
{{XeFrontend::meta()->name('viewport')->content(
'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
)->load()}}
이 줄 전체를 주석 처리 또는 삭제를 합니다.
위 코드를 삭제 한후, 해당 파일의 제일 하단에 아래 코드를 넣어 줍니다.
이유는 다른 파일에서 확대 방해 하는 코드가 있어도 , 아래 코드가 해당 코드를 무력화 합니다.
<script>
// 페이지 로드 시 기존 viewport 메타 태그를 강제로 변경
document.addEventListener("DOMContentLoaded", function() {
var viewport = document.querySelector('meta[name="viewport"]');
if (viewport) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes');
}
});
</script>
파일을 저장후, FTP 프로그램으로 본래의 위치에 업로드 합니다.
스마트 폰에서 새로 열기 해보면 사이트가 확대 되는것을 확인 할수 있습니다.
다른 테마는 경로가 다를수 있습니다.
Cosmo 테마 일 경우 theme.blade.php 경로
XE3 설치폴더/ plugins/ cosmo/ src/ Themes/ Cosmotheme/ views
Together 테마 일 경우 theme.blade.php 경로
XE3 설치폴더/ plugins/ together/ Components/ Theme/ views
대략 8번째줄 전체를 주석 처리 합니다.
<!--
{{-- meta(viewport) --}}
{{ app('xe.frontend')->meta()->name('viewport')->content(
'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
)->load() }}
-->
파일 수정후, 아이폰의 사파리에서는 바로 효과가 나타나지 않습니다. 아이폰 사용자분들은, 크롬 브라우즈에서 테스트 하시길 권장 합니다.
테마별 코드는 맞는데 수정해서 업로드하면 에러가 발생하는 이유는, 파일 권한이 맞지 않아서 그렇습니다. SSH 접속하여 chmod 명령어를 이용하여 수정한 파일의 권한을 755로 설정하면 됩니다.
계속 에러발생할때, 설치폴더 전체 또는 메인 폴더의 권한을 변경합니다. 기본적으로 모두 755권한을 설정합니다. 필자의 경우 권한 설정때문에 수많은 테스트를 했습니다. 코드 삭제 때문에 에러발생이 아니라 파일 또는 폴더 권한 때문에 발생한 문제 였습니다. 유그린 나스의 보안강화로 FTP프로그램에서 권한 설정이 되지않아, 유그린 관리자 화면의 파일 앱에서 권한 설정을 하였더니, 폴더 전체의 권한이 변경되는 에러가 있었습니다. 유그린 측에서 문제를 인식하여 파일 앱을 업데이트 해야 해결될 문제입니다. 현재(2026.5.20) 권한설정은 SSH 사용을 권장 합니다.
0개 댓글