문단은 블럭에 막히면 자동적으로 줄바꿈이 이루어지지만 이미지나 아이프레임 등은 특별한 조치를 해 줘야 한다.
특히 모바일 기기에서의 화면 크기는 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 변수를 기준으로 모바일 여부를 파악할 수 있습니다.