باستخدام jQuery للحصول على حجم المنفذ

StackOverflow https://stackoverflow.com/questions/3044573

  •  27-09-2019
  •  | 
  •  

سؤال

كيف يمكنني استخدام jQuery لتحديد حجم منفذ عرض المتصفح ، وإعادة اكتشاف ذلك إذا تم تغيير حجم الصفحة؟ أحتاج إلى جعل حجم iFrame في هذا الفضاء (يأتي قليلاً على كل هامش).

بالنسبة لأولئك الذين لا يعرفون ، فإن منفذ عرض المتصفح ليس حجم المستند/الصفحة. إنه الحجم المرئي لنافذتك قبل التمرير.

هل كانت مفيدة؟

المحلول

للحصول على عرض وارتفاع منفذ العرض:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

تغيير حجم الصفحة:

$(window).resize(function() {

});

نصائح أخرى

يمكنك المحاولة وحدات المنفذ (CSS3):

div { 
  height: 95vh; 
  width: 95vw; 
}

دعم المتصفح

1. الرد على السؤال الرئيسي

النص $(window).height() هل يعمل بشكل جيد (إظهار ارتفاع منفذ العرض وليس المستند مع ارتفاع التمرير) ، ولكن يحتاج إلى وضع علامة doctype بشكل صحيح في المستند الخاص بك ، على سبيل المثال هذه doctypes:

لـ HTML 5:

<!DOCTYPE html>

ل HTML4 الانتقالية:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

من المحتمل أن تكون doctype الافتراضية التي يفترضها بعض المتصفحات ، $(window).height() يأخذ ارتفاع المستند وليس ارتفاع المتصفح. من خلال مواصفات Doctype ، يتم حلها بشكل مرض ، وأنا متأكد تمامًا من أنك ستتجنب "تغيير التداول المفرط إلى الخفي ثم العودة" ، وهو ، أنا آسف ، خدعة قذرة بعض الشيء ، خاصة إذا كنت لا ترتدي " توثق ذلك على رمز استخدام المبرمج المستقبلي.

2. نصيحة إضافية ، لاحظ جانبا:علاوة على ذلك ، إذا كنت تقوم بعمل برنامج نصي ، فيمكنك اختراع الاختبارات لمساعدة المبرمجين في استخدام مكتباتك ، اسمحوا لي أن أخترع زوجين:

$ (وثيقة). READER (function () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

تحرير: حول الجزء 2 ، "نصيحة إضافية ، ملاحظة جانبا": machiel ، في تعليق الأمس (2014-09-04) ، كان صحيحا تماما: لا يمكن أن يكون فحص $ داخل الحدث الجاهز من jQuery ، لأن نحن ، كما أشار ، على افتراض أن $ محددة بالفعل. نشكرك على الإشارة إلى ذلك ، واطلب من بقية القراء تصحيح هذا ، إذا استخدمته في البرامج النصية الخاصة بك. اقتراحي هو: في مكتباتك ، ضع وظيفة "install_script ()" تهيئة المكتبة (ضع أي إشارة إلى $ داخل وظيفة init هذه ، بما في ذلك إعلان Ready ()) وفي بداية هذه الدالة "install_script ()" ، تحقق مما إذا كانت $ محددة ، ولكن اجعل كل شيء مستقلًا عن jQuery ، بحيث يمكن لمكتبة "تشخيص نفسها" عندما لا يتم تعريف jQuery بعد. أفضل هذه الطريقة بدلاً من إجبار إنشاء jQuery التلقائي الذي يحضرها من CDN. هذه ملاحظات صغيرة جانبا لمساعدة المبرمجين الآخرين. أعتقد أن الأشخاص الذين يصنعون المكتبات يجب أن يكونوا أكثر ثراءً في التعليقات على أخطاء المبرمج المحتملة. على سبيل المثال ، تحتاج واجهات برمجة تطبيقات Google إلى دليل جانباً لفهم رسائل الخطأ. هذا أمر سخيف ، أن يحتاج إلى وثائق خارجية لبعض الأخطاء الصغيرة التي لا تحتاج إلى الذهاب والبحث في دليل أو مواصفات. يجب أن تكون المكتبة موثقة ذاتيا. أنا أكتب رمزًا حتى رعاية الأخطاء التي قد ارتكبها حتى بعد ستة أشهر من الآن ، وما زالت تحاول أن تكون رمزًا نظيفًا وغير مبتكر ، ومكتوب بالفعل في التطور.

يمكنك استخدام $ (window) .resize () للكشف عن ما إذا كان يتم تغيير حجم منفذ العرض.

ليس لدى jQuery أي وظيفة للكشف باستمرار عن العرض وارتفاعه بشكل صحيح [1] عندما يكون هناك شريط تمرير.

لقد وجدت حلًا يستخدم مكتبة Modernizr وبالتحديد وظيفة MQ التي تفتح استعلامات الوسائط لـ JavaScript.

هذا هو الحل:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

من المحتمل ألا تساعد إجابتي في تغيير حجم IFRAME إلى عرض إيفار 100 ٪ مع هامش على كل جانب ، لكنني آمل أن يوفر عزاءًا لمطوري الويب المحبطين مع عدم اتساق المتصفح لعرض المنافذ JavaScript وحساب الارتفاع.

ربما يمكن أن يساعد هذا فيما يتعلق بـ Iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

1] يمكنك استخدام $ (window) .width () و $ (window). Height () للحصول على رقم سيكون صحيحًا في بعض المتصفحات ، ولكنه غير صحيح في الآخرين. في تلك المتصفحات ، يمكنك محاولة استخدام Window.innerwidth و Window.innerheight للحصول على العرض والارتفاع الصحيحين ، لكنني أنصح هذه الطريقة لأنها تعتمد على استنشاق وكيل المستخدم.

عادةً ما تكون المتصفحات المختلفة غير متسقة حول ما إذا كانت تتضمن شريط التمرير كجزء من عرض النافذة والارتفاع.

ملاحظة: يختلف كل من $ (window) .width () و window.innerwidth بين أنظمة التشغيل باستخدام نفس المتصفح. نرى: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });

يرجى ملاحظة أن وحدات CSS3 Viewport (VH ، VW) لن تلعب بشكل جيد على iOS عند تمرير الصفحة ، ويتم إعادة حساب حجم منفذ العرض بطريقة أو بأخرى ويزداد حجمك للعنصر الذي يستخدم وحدات منفذ العرض أيضًا. لذلك ، في الواقع بعض javaScript مطلوب.

للحصول على حجم المنفذ على حمل و على تغيير الحجم (بناءً على استجابة سيمبور):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top