모바일 웹에서 화면이 확대/축소되지 않도록 설정하기

12 Comments

모바일 기기에서 화면이 확대/축소되지 않도록 설정하기

요즘 나오는 대부분의 워드프레스는 반응형(Responsive)으로 나오기 때문에 모바일 기기에서는 자동으로 모바일 버전이 표시됩니다. 모바일 버전에서 손가락을 벌리거나 오므리면 화면이 확대/축소되지 않도록 설정하려면 다음 코드를 header.php 파일에 추가하도록 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

만약  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 메타 태그가 header.php 파일에 이미 있다면 user-scalable=no만 추가하면 됩니다. Viewport를 지원하는 않는 장치의 경우 다음 코드를 추가합니다.

<meta name="HandheldFriendly" content="true" />

인터넷 익스플로러(IE) 10 버전에서 제대로 작동하지 않는 경우 -ms-content-zooming: none | zoom 구문을 사용합니다(여기 참고). 가령 다음과 같은 CSS 코드를 스타일시트 파일에 추가하도록 합니다.

html {

-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;

}
// Source: stackoverflow

모바일 기기에서 가로로 스크롤되지 않도록 하기

모바일 장치에서 가로(수평)로 스크롤되지 않도록 하려면 다음과 같은 코드를 시도해봅니다.

body{
width:320px; // 혹은 적당한 크기 또는 100%
overflow-x:hidden;
}

이 내용은 더 이상 유효하지 않다고 Matthew님께서 알려주셨습니다. 아이폰, 스마트폰 미디어 쿼리는 "아이패드, 아이폰, 스마트폰 등의 모바일 기기에 사용 가능한 미디어 쿼리"를 참고해보시기 바랍니다.

추가: 워드프레스 OceanWP 테마에서 모바일 확대/축소 비활성화기

인기 워드프레스 테마 중 하나인 OceanWP 테마를 사용하는 경우 모바일 모드에서 확대/축소가 되지 않도록 하려면 다음과 같은 코드를 사용 중인 테마의 함수 파일에 추가하면 됩니다. 반드시 차일드 테마를 만들어 작업하세요.

// Disable Scaling in mobile mode
add_filter('ocean_meta_viewport', 'owp_child_viewport');
function owp_child_viewport( $viewport ){
	$viewport = '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">';
	return $viewport;
}

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

12개 댓글

  1. 안녕하세요~divi 사용중입니다..
    혹시 반대로 viewport를 사용해야하는 경우에는 yes로만 변경하고 맥시멈을 8로 설정해서 header.php를 변경했는데 안되는 이유가 어렵네요..
    읽어주셔서 감사합니다..

    응답

  2. 1. 가로로스크롤 안되게하는 코드는 style.css에 넣는건가요?
    2. 제가 워드프레스상에서 홈페이지 여백을 지정했는데, 모바일에서도 여백이 그대로 나와가지구ㅠ
    혹시, 모바일에서 볼때 여백을 없애는 방법이 있을까요?

    이거때문에 wptouch를 설치했다지웠다, 첫번째코드를(header.php에 있는) 지웠다 넣었다 ㅠㅠㅠ

    응답

    1. 안녕하세요?
      블로그를 방문해주셔서 감사합니다.

      1. CSS는 코드는 스타일시트 파일 즉 style.css 파일에 넣어야 합니다. 하지만 차일드 테마를 만들거나 테마 내에서 CSS를 넣는 섹션이 있으면 직접 넣으셔도 됩니다.

      https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/ 글을 참고해보시기 바랍니다.

      2. 미디어 쿼리를 사용하시면 됩니다.
      https://www.thewordcracker.com/miscellaneous/how-to-modify-the-wordpress-layout-for-mobile-devices/ 글에서 "// Only applies to mobile device screens whose minimum width is 768px" 라고 되어 있는 코드 부분에 여백 지정하는 코드를 넣으면 해상도가 768px 이상인 기기에서만 해당 코드가 적용됩니다.

      응답

      1. 답변 감사합니다! 좀더 추가적으로 여쭤보고 싶어서 ㅎㅎ
        1. 유투브영상의 경우, 반응형이 안되고 고정된크기를 그대로 유지하려고해서 모바일에서는 영역을 벗어나더라구요, 그래서 overflow코드를 사용하면 해결이 될거라 생각했는데 여전히 안되네요. 혹시 다른 방법이 있을가요?

        2. 흠 이미 워드프레스-페이지 상에서 visual composer로 여백이 지정이 되어있어서, 768px이하의 기기에서면 여백을없애는코드를 넣으려고
        @media only screen and (max-width: 768px){
        .vc_row {
        padding-right: 0;
        padding-left: 0;
        }
        }
        요렇게 스타일시트에 넣었습니다만 안되는이유는 무었일까요 ㅠ ㅎㅎ?
        저 '.vc_row'에 body도 넣어보고 element.style도 넣어보고했는네도 안되네요ㅠ

      2. 안녕하세요?

        1. https://www.thewordcracker.com/miscellaneous/make-youtube-and-vimeo-vides-responsive/ 글을 참고해보세요.

        2. VC는 예상 외로 버그가 많은 플러그인입니다. 가급적 사용하지 않는 것이 좋지만 레이아웃 작업에 익숙하지 않으면 사용하셔야 할 것 같습니다. (https://www.thewordcracker.com/basic/pros-and-cons-of-page-builder-of-wordpress/ 참고)

        우선 padding-right: 0!important;와 같이 !important를 지정하여 테스트해보시기 바랍니다.

        그리고 visual composer 내에서 여백 지정을 할 수 있을 것 같습니다. 그런 부분을 체크해보시기 바랍니다.
        잘 안 되면 VC 판매자에게 지원을 요청해보시면 어떨까요?

      3. 1. 와 감사합니다! 모든 경우의 해결방법이 이미 포스팅이 되어있군요! ㅎㅎ
        2. ㅠ네, 아예 vc를 사용하지않고 경우를 나눠서 스타일시트에 하는걸 시도해보아야겠습니다.
        답변 감사합니다!

    2. 본글 에 소개되어 있는 css 는 절대 사용하면 안됩니다. (워드님께는 죄송)

      글 하나 작성하다 우연하게 이 댓글을 보게 되었는데, 아이폰 6 의 width 는 375px, 아이폰 6+ 의 width 는 414px.

      이렇게 기기마다 device width 가 다르기 때문에, 워드님이 작성하신 width:320px 이건 매우 오래전에 (아이폰 4 시절) 사용가능하던 방식이고, 지금은 저렇게 css 작성하시면 안됩니다.

      모바일 기기에서 width 는 항상 반응형으로 작성하셔야 합니다.

      "모바일에서도 여백이 그대로 나와가지구ㅠ" - "반응형 css 작성" 같은 단어로 구글링 하시면 css 작성하는 방법을 알려드리는 글들이 한글로도 검색되실거에요. 어떤 특정 문제 해결을 하시려는 것 보다는, css 를 이해하시려는 노력을 하시는 것이 좋습니다.

      지금 해결하시려는 문제는 css 의 media query 를 이해하시면 간단하게 해결할 수 있는 문제 입니다.

      응답

      1. 안녕하세요?
        좋은 지적 감사합니다.

        width:320px; // 혹은 적당한 크기 또는 100%

        아마도 인용한 원 글에서는 width:320px;로 되어 있는데, 저는 width:100%;로 하여 테스트를 한 것 같습니다. (조금 오래되어 정확히 기억이 나지 않네요.)

        맨 끝에 있는 CSS 코드는 삭제하도록 하겠습니다.

      2. 네 현재는 여백을 퍼센트로 조정해서, 모바일에서도 여백이 많이 안보이게 해놓긴했는데,
        알려주신 방법으로 한번 검색해서 알아보긴해야겠네요 ~^^ 감사합니다.

  3. 혹시 가로로 스크롤 안 되게는 못하나요? 확대는 안 되는데 옆으로 스크롤라면 화면이 옆으로 이동하네요...

    응답

    1. 안녕하세요?

      모바일 기기에서 가로로 스크롤되지 않도록 하는 방법을 추가했습니다. 즐거운 하루되세요^^

      응답

댓글 남기기

* 이메일 정보는 공개되지 않습니다.