ابحث عن الارتفاع الدقيق وعرض منفذ العرض بطريقة متقاطعة (لا يوجد نموذج أولي/jQuery)
-
21-09-2019 - |
سؤال
أحاول العثور على الارتفاع الدقيق وعرض منفذ عرض المتصفح ، لكنني أظن أن موزيلا أو 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>
لطالما استخدمت للتو document.documentElement.clientHeight
/clientWidth
. لا أعتقد أنك بحاجة إلى أو الظروف في هذه الحالة.
جرب هذا..
<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>