ie 에서는 style:display:hidden 이 먹히질 않습니다.
그래서 visibility:hidden 을 사용 하면 ie/ff/ 등등 기타 브라우저에서도 잘 동작 합니다.
Cross Browser(User-agent) 서비스 개발
From Byungsun
Contents[hide] |
[edit]
User-agent 필터링을 하는 이유
국내 포털에서 제공하는 모바일용 페이지는 아래와 같은 이유로 User-agent를 필터링하여 기본적으로 1개의 HTML 페이지에 여러개의 CSS 및 메타태그를 적용하여 서비스를 제공하고 있음.
- 다양한 단말을 지원해야 함
- 구축/운영의 편의/신속성
- 단말별로 해상도/화면크기 및 DPI(Dots per Inch)가 상이하여 1개의 CSS로 모든 기기 지원 불가능
동일 CSS를 사용하는 Device이나 서로 렌더링이 상이할 경우 Device의 판매량, Telco 전략 단말 여부에 따라 우선 순위를 지정하여 순위가 높은 Device에 최적화 함.
따라서 썸네일, 서버 자동생성 이미지(증권 차트 등)을 제외한 타이틀, 버튼은 <img src="" />요소를 사용하지 않고 IR기법으로 CSS의 background 속성을 이용하여 사용하며 또한 이미지 깨짐 현상을 우회하기 위하여 최대한 이미지가 아닌 텍스트를 활용 하는 것을 권장함
[edit]
브라우저 분기에 Media Queries를 사용하지 않는 이유
Media Queries는 해상도를 기준으로 CSS를 분기하는데 실제 페이지들은 어플리케이션 링크 또는 브라우저 자체의 HTML/CSS/JS 구현 정도에 따라 특화되어 만들어지므로 해상도를 기준으로 분기하는 것보다 User-agent를 통해 플랫폼 또는 단말별로 명확하게 분기하는 것이 더 정확한 방법임
[edit]
브라우저 / 단말별 User-agent
- Apple Safari
- iPhone : Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
- iPod Touch : Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
- iPad : Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
- Android
- Galaxy-S : Mozilla/5.0 (Linux; U; Android 2.1; ko-kr; SHW-M110S Build/ECLAIR) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
- Moto-Qwerty : Mozilla/5.0 (Linux; U; Android 2.1-update1; ko-kr; A853 Build/SUSKT_U1_00.10.0) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
- Optimus-one : Mozilla/5.0 (Linux; U; Android 2.2; ko-kr; LG-KU3700 Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
- Opera Mobile9 (설정에서 2가지중 선택 가능, 기본값은 데스크탑 컴퓨터)
- M490(옴니아) 휴대용 기기 모드 : 기기명/(null)IC4 (compatible;MSIE 6.0; Windows CE; PPC) Opera 9.5
- M490(옴니아) 데스크탑 컴퓨터 모드 : Opera/9.5 (Windows NT 5.1; SKT; U; en)
- Infraware Polaris6
- LH2300(아르고) 초기 : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0); lgtelecom
- LH2300(아르고) : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*480;POLARIS 6.0;em1.0;lgtelecom;EB10-20080520-702676908;LG-LH2300;0);
- SPH-W6050(햅틱온) : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*480;POLARIS 6.0;em1.0;lgtelecom;EB10-200090512-709515955;SPH-W6050;0);
- SCH-W740(햅틱8M) : Mozilla/4.0 (compatible; MSIE 6.0; WIPI 2.0);800*480;NATEBrowser 5.0;em1.0
- uZard WebSurfing (Webviewer)
- LH2300(아르고) : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; 800*480;WV01.00.01;;lgtelecom;EB10-20080520-702676908;LG-LH2300;0)
- SPH-W6050(햅틱온) : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; 800*480;WV01.00.01;;lgtelecom;EB10-20090512-709515955;SPH-W6050;0);
- SCH-W740(햅틱8M) : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; WOW64; Trident/4.0)
- canU801Ex : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2;480*752;WV01.00.06;;lgtelecom;EB10-20080000-200900001;canU801Ex;)
- M490(옴니아), SONY X1 : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2); WOW64; Trident/4.0
- M4800(미라지) : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; WOW64; SV1); uZard; KTF
[edit]
Meta Tag, CSS
DPI 이슈의 우회와 브라우저가 제공하는 기능의 제어를 위하여 사용
[edit]
Safari
1 |
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> |
2 |
<meta name="format-detection" content="telephone=no" /> |
- viewport 속성을 사용하여 화면 비율을 100%로 고정하고 사용자의 임의 확대축소를 불가능하게 함
- format-detection 속성을 사용하여 연속된 숫자의 자동 링크(전화걸기) 기능을 제한함
1 |
*{-webkit-text-size-adjust:none;} |
- 브라우저가 폰트 사이즈를 강제로 조정하는 것을 방지함
[edit]
Android
1 |
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densityDpi=device-dpi" /> |
- viewport 속성을 사용하여 화면 비율을 100%로 고정하고 사용자의 임의 확대축소를 불가능하게 함
[edit]
Opera9.5 Mobile
1 |
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
- viewport 속성을 사용하여 화면 비율을 100%로 고정하고 사용자의 임의 확대축소를 불가능하게 함
[edit]
알려진 문제점
[edit]
공통
- 유선과 다르게 무선은 네트웍 속도가 느리고, 단말 자체의 처리 속도가 느려서 CSS를 외부 파일로 제공하거나 다량의 속성을 인터널로 삽입하면 CSS가 로드되지 않은 HTML페이지가 뿌려졌다가 CSS가 입혀지는 과정을 사용자가 보게 됨
- 단말에 탑재된 폰트의 경우 대부분 볼드와 볼드가 아닌 서체가 크게 다르지 않아 기획/디자인상에서 강조하려는 부분은 폰트사이즈 및 컬러를 이용하는 것이 권장됨
[edit]
Safari
- CSS속성 overflow:scroll을 이용한 페이지 내부 스크롤바 생성이 불가능함 (스크롤바 자체를 표시하지 않음)
- 투핑거 드래그로 제어는 가능하나 대부분의 유저들이 해당 기능을 인지하고 있지 않음
[edit]
Android
- CSS속성 overflow:scroll을 이용한 페이지 내부 스크롤바 생성이 불가능함 (스크롤바 자체를 표시하지 않음)
[edit]
IE와 동일한 User-agent를 제공하는 모바일 브라우저
- 초기에 배포된 Webviewer, WebSurfing의 경우 일반PC에 탑재된 IE6또는 7과 동일한 User-agent를 제공하거나, 단말의 모델 정보나 해상도 정보등을 추가하지 않은 경우가 있어 필터링이 불가능한 경우가 있음
- 따라서 현재 Webviewer, WebSurfing가 탑재된 단말 중 800px보다 큰 해상도의 단말은 출시가 안되었으므로 User-agent필터링에 실패할 경우 기본으로 가로를 800px으로 제한하는 웹뷰어용 CSS를 제공함
- 일반PC인지 모바일인지 완벽하게 분리가 불가능하므로 이전의 WAP이나 PDA 전용 페이지를 PC에서 접근시 별도의 소개 페이지로 자동 이동시키는 것과 같은 플로우는 불가능함
[edit]
User-agent 체크 모듈 샘플(PHP)
01 |
<?php |
02 |
$userAgent = $_SERVER['HTTP_USER_AGENT']; |
03 |
if ( strstr($userAgent, 'iPhone') || strstr($userAgent, 'iPod') || strstr($userAgent, 'iPad') ) { |
04 |
//Safari |
05 |
} else if ( strstr($userAgent, 'Android') ) { |
06 |
//Android |
07 |
} else if ( strstr($userAgent, 'Opera') ) { |
08 |
//Opera |
09 |
} else if ( strstr($userAgent, 'lgtelecom') ) { |
10 |
if ( strstr($userAgent, 'WV01') ) { |
11 |
//Web viewer on LGT |
12 |
if ( strstr($userAgent, '480*') ) { //W480 |
13 |
echo '<style type="text/css">#container{width:480px;}</style>'; |
14 |
} else { //W800 |
15 |
echo '<style type="text/css">#container{width:800px;}</style>'; |
16 |
} |
17 |
} else { |
18 |
//Polaris on LGT |
19 |
} |
20 |
} else if ( strstr($userAgent, 'NateBrower') ) { //polaris on SKT |
21 |
//Polaris on SKT |
22 |
} else { |
23 |
//Other |
24 |
if ( strstr($userAgent, '480*') ) { //W480 |
25 |
echo '<style type="text/css">#container{width:480px;}</style>'; |
26 |
} else { //W800 |
27 |
echo '<style type="text/css">#container{width:800px;}</style>'; |
28 |
} |
29 |
} |
30 |
? |