Program Tip

브라우저 간 방식으로 뷰포트의 정확한 높이와 너비를 찾습니다 (Prototype / jQuery 없음).

programtip 2020. 11. 17. 20:59
반응형

브라우저 간 방식으로 뷰포트의 정확한 높이와 너비를 찾습니다 (Prototype / jQuery 없음).


브라우저 뷰포트의 정확한 높이와 너비를 찾으려고하는데 Mozilla 또는 IE가 잘못된 번호를 제공하는 것 같습니다. 높이에 대한 내 방법은 다음과 같습니다.

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

나는 아직 너비에 대해 시작하지 않았지만 비슷한 것이 될 것이라고 생각합니다.

이 정보를 얻는 더 정확한 방법이 있습니까? 이상적으로는 솔루션이 Safari / Chrome / 다른 브라우저에서도 작동하도록하고 싶습니다.


이것을 시도해 볼 수 있습니다.

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

( http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ )

그러나 모든 브라우저 (예 : 쿼크 모드의 IE6)에서 뷰포트 정보를 얻는 것은 불가능합니다. 그러나 위의 스크립트는 좋은 일을 할 것입니다 :-)


더 짧은 버전을 사용할 수 있습니다.

<script type="text/javascript">
<!--
function getViewportSize(){
    var e = window;
    var a = 'inner';
    if (!('innerWidth' in window)){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>

I've always just used document.documentElement.clientHeight/clientWidth. I don't think you need the OR conditions in this case.


Try this..

<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>

Use this tipp: http://www.appelsiini.net/projects/viewport or that code: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

참고URL : https://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto

반응형