DOCTYPE 이 정의된 HTML 에서 필요할까 싶긴 한데요..
DOCTYPE 이 없이 HTML4.x 로 작성된 웹페이지라면,
웹브라우저 종류를 알아내는 것이 중요할 수도 있어요..
$.browser.msie 가 true 이면 MS 사의 인터넷 익스플로러, 아니면 다른 웹브라우저 입니다.
각 웹브라우저 간의 호환성이나 표준 HTML 을 고민하다 보면, 가끔씩 TABLE 태그를 사용하던 시절이 그립기도 합니다.
$.browser.version 는 웹브라우저 버전.
$.browser.safari 사파리 웹브라우저일때 true, 아니면 undefined.
$.browser.opera 오페라 웹브라우저일때 true, 아니면 undefined.
$.browser.msie MS IE 웹브라우저일때 true, 아니면 undefined.
$.browser.mozilla 파이어폭스 웹브라우저일때 true, 아니면 undefined.
var browser = $.browser.msie;
if(browser==undefined && !browser) MS IE 가 아닌 조건
if(browser!=undefined && browser) MS IE 인 조건
if($.browser.msie) 라고 하면 MS IE 인 경우에만 실행되니까.. 아무래도 IE 는 예전 버전, 특히 6.x 가 살아 있어서요..
자세한 것은 아래 URL 을 참조하시구요..
http://godffs.tistory.com/581
본문 레이아웃이 가운데 정렬인 화면에서 x 좌표가 웹브라우저 폭 변화에 따라 달라지기 때문에 발생하는 점은,
상위 요소를 position:relative 로 주고 x 좌표를 주어야 하는 하위 요소에 position:absolute 를 주면 되는데..
DOCTYPE 이 없는 IE4.x HTML 화면에서는, 웹브라우저 종류에 따라 x 좌표가 틀어지게 됩니다.
이때 웹브라우저 화면 resize 이벤트에 관련 코드를 추가하면 됩니다.
$(window).resize(function(){
/* 이곳에 x 좌표 관련 코드를 넣어요 */
});
- 다른 도메인을 품고 있는 iframe 안의 내용을 resize 하는 방법
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
예를 들면 아래와 같이요..
<html>
<body style="margin:0 auto">
<div id="contentA" style="position:relative">
<div id="contentB" style="position:absolute; left:[x좌표값]px">표시되는 화면 요소</div>
</div>
<script>
var msie = $.browser.msie;
if(msie==undefined && !msie){ // MS IE 가 아닌 웹브라우저
var hnp = $('#contentA').position();
if(hnp!=null){ // 이 부분은 화면에 따라 contentA 요소가 존재하지 않을 수 있어서 추가된 부분
var $b1 = $('#contentB');
$b1.css('left',[x좌표값] + hnp.left);
$(window).resize(function(){
$b1.css('left',[x좌표값] + $('#contentA').position().left); // window.resize 시점의 값을 되가져 와야 한다
});
}
}
</script>
</body>
</html>
o http://spoqa.github.com/2012/08/16/make-a-responsive-web.html
$.extend($.browser,
{iOS:navigator.userAgent.toLowerCase().match(/iP(hone|ad|od)/i),
Android:navigator.userAgent.toLowerCase().match(/Android/i),
WindowsPhone:navigator.userAgent.toLowerCase().match(/Windows\ Phone/i)}
);
if($.browser.msie){...}
if($.browser.iOS){...}
if($.browser.Android){...}
if($.browser.WindowsPhone){...}
if($.browser.msie){
var ieVersion = $.browser.version;
if(ieVersion <= 6.0){...}
else if(ieVersion == 7.0){...}
else if(ieVersion == 8.0){...}
else if(ieVersion >= 9.0){...}
'Local Oriented > jQuery' 카테고리의 다른 글
| jQuery 로 Ajax 가 중첩되어 또는 순차적으로 Call 할때 CallBack 함수 사용 (1) | 2011.10.05 |
|---|---|
| jQTouch, 멀티 스마트 기기 지원하는 jQuery 기반의 모바일 웹 플러그인 (1) | 2011.10.05 |
| 모바일 기기를 고려한다면, mouseover 와 click 이벤트를 모두 설정하여야.. (0) | 2011.08.29 |
| jQuery 강좌 (1) | 2011.07.14 |
| jQuery Proven Performance, Tips & Tricks (튜닝, 팁, 트릭) (6) | 2011.07.11 |
