모바일 기기에서 작동 조건문으로 제어하는 방법

마래바2018.02.07 00:12조회 수 261추천 수 4댓글 0

문단은 블럭에 막히면 자동적으로 줄바꿈이 이루어지지만 이미지나 아이프레임 등은 특별한 조치를 해 줘야 한다.

특히 모바일 기기에서의 화면 크기는 PC와 다르기 때문에 이미지나 아이프레임은 옆으로 빠져나가기 일쑤다.

이럴 때 css 로는 @media 를 이용해 제어할 수 있고 html 에서는 if 조건문을 이용할 수 있다.

 

< 조건문을 이용한 제어 >

모바일에서 이 페이지가 디스플레이된다면.. 이렇게 하고.. 아니면.. 이렇게 해라... 라고 제어해 주는 것이다.

<!--@if(Mobile::isMobileCheckByAgent())-->
모바일일 때 나타나야 하는 동작, 작동
<!--@else-->
모바일이 아닐 때 나타나야 하는 작동
<!--@end-->

 

---------- 참고 -----

 

Mobile::isMobileCheckByAgent() → 모바일 기기에서 접속했는지 User-agent 값을 확인합니다. 개발자가 테스트를 위해 ?m=1을 붙였거나 쿠키를 사용하여 모바일로 취급하도록 한 경우에는 제대로 인식하지 못할 수도 있습니다.

 

Mobile:: isMobilePadCheckByAgent() → 위와 같지만, 태블릿만 따로 인식합니다. XE에서 태블릿은 모바일로 취급하지 않으므로, 태블릿에서도 적용되는 코드를 만들려면 아래의 함수와 조합하여 사용해야 합니다. 라이믹스에서는 태블릿을 모바일로 취급할지 선택하는 옵션이 있습니다.

 

Mobile:: isFromMobilePhone() → 위의 두 함수를 포함하여 종합적으로 판단합니다. 코어에서 PC용 레이아웃을 보여줄지 모바일 레이아웃을 보여줄지 판단하는 기준도 이것이므로, 일관성있는 판단이 가능합니다. (권장)

 

.xe-mobilelayout → 모바일에서 접속한 경우 <html> 태그에 이 클래스가 추가됩니다. CSS, JS에서 모바일 여부를 구분해야 할 때 유용하게 사용할 수 있습니다. 예: .xe-mobilelayout .xe_content { 스타일: 곰곰; }

 

<!--@if($m)-->, cond="$m" 등 → XE에서는 이 변수가 있는 곳도 있고 없는 곳도 있고 좀 애매합니다. 라이믹스에서는 레이아웃과 스킨 등 모든 템플릿에서 $m 변수를 기준으로 모바일 여부를 파악할 수 있습니다.

 

관련된 다른 게시물
  1. [2019/07/14] 테이블, 아이프레임 가로 스크롤 ()
  2. [2018/03/26] 진에어, 홈페이지 새롭게 개편 - 모바일 대응 (1142, 1)
    • 글자 크기
특정 게시글에서 광고 제거하기 확장자 없는 외부 이미지 호스팅 시 섬네일 생성 테스트

댓글 달기 WYSIWYG 사용

글쓴이 비밀번호
번호 제목 날짜
HOT 민간항공조종사협회, '가덕도신공항 다수 안전문제 신중해야'3 2021.03.03
HOT 사상 최초의 비행 시뮬레이터 'Link Trainer, 블루박스'3 2021.02.20
HOT 에어프레미아, 유니폼 공개 ·· 그러나 항공기 없어, 취항 언제? 2021.02.10
HOT 에어로케이, 취항 연기 ·· 항공기 띄울 여력 없어 2021.02.10
HOT '김포공항 없애고 주택 짓자' ·· 박용진 의원, 서울시장 후보에 제안 2021.02.07
공지 게시글과 항공위키 연계 관련하여 2018.02.15
공지 해외여행(항공) 준비할 것과 여행 팁 (총정리) 2015.03.12
48 [미디어위키] 사이트 전체 css 설정 - 특정 스킨만 수정할 경우 2021.01.07
47 SQL 쿼리 이용 검색, 바꾸기 2020.06.17
46 미디어위키 사이트맵(sitemap) 생성 2020.06.10
45 미디어위키, 소도구(Gadget) 기능 2020.04.24
44 미디어위키, 사용자 css 구성 2020.04.24
43 미디어위키, 공지사항 표시 2020.04.21
42 미디어위키, 위지윅 에디터 2020.04.15
41 미디어위키 업그레이드 관련 composer 설치 및 업데이트 2019.11.01
40 미디어위키, 각주 툴팁(미리보기) 만들기 2019.10.31
39 테이블, 아이프레임 가로 스크롤 2019.07.14
38 Ckeditor 4 툴바 Configuration 2019.06.08
37 일정 수 이상 신고받은 댓글 블라인드 처리하기 2019.04.27
36 [미디어위키] 리버티 스킨 메뉴 설정 방법 2018.11.26
35 [미디어위키] 업그레이드 방법 2018.11.18
34 연관글 애드온 출력 위치 마음대로 조정하기 2018.08.13
33 [미디어위키] 로고 변경 2018.04.20
32 임의 섬네일 랜덤으로 표출하는 방법 2018.03.06
31 본문에서 img 태그 읽어서 광고 display 유무 조절 2018.03.02
30 특정 게시글에서 광고 제거하기 2018.02.24
모바일 기기에서 작동 조건문으로 제어하는 방법 2018.02.07
28 확장자 없는 외부 이미지 호스팅 시 섬네일 생성 테스트 2018.01.23
27 게시판마다 다른 조건 결과 작동하기(광고 노출 등) 2018.01.22
26 [미디어위키] 애드센스 적용 방법 2017.09.01
25 미디어위키 사용자별 권한 설정 방법 2017.04.22
24 ckeditor 편집화면 보기(view) 및 소스(source) 폰트 변경 2017.02.18
23 첨부 파일 아이콘 출력 안하기 2017.02.15
22 referer 모듈, 애드온 때문에 SNS 공유 안되는 현상 2016.06.03
21 MAC에서 홈페이지 게시판 내용이 일부만 보입니다. 2016.05.21
20 [미디어위키] 저작권리 하단부 편집 2015.12.08
19 글 본문 보기(View) 및 편집(Edit) 상태에서의 글꼴, 문단 등 유형 변경하기 2015.04.28