اذهب إلى المحتوى
  • 0

هل يمكن استخدام media query توافق الصفحات و منع تصغير شاشة المتصفح

Shahad Mohammad

السؤال

اصمم موقع و استخدم media query في توافق الصفحات لكني اريد ان اضع حد بحيث اذا صغرت الصفحط اكثر لا استطيع تصغيرها ، مثل هذه الصفحة جرب تصغيرها لاصغر قدر ممكن ستسطيع الى حد معين تقريبا ثلث الشاشه فقط ، هذا الحد وضعه المبرمج لن تستطيع تصغيرها اكثر، فكيف اقوم بذلك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

أولاً حدد حد أدنى لعرض الصفحة للعنصر body

body {  min-width:600px; }

بما تراه مناسباً، 

ملاحظة: للتحكم في تحديد أبعاد المتصفح، يجب أن نفتح النافذة بالتعليمة window.poen

ملاحظة من مقالة أكاديمية حسوب المرفقة مع الإجابة:

اقتباس

خاص بالنوافذ المنبثقة: تحجب المتصفحات التوابع السابقة لتمنع استخدامها بشكل غير سليم، وستعمل فقط على النوافذ المنبثقة التي نفتحها، والتي لا تحتوي على صفحات متعددة ضمنها.

لا تكبير أو تصغير للنوافذ: لا يوجد في JavaScript أي وسائل لتكبير النافذة أو تصغيرها، حيث يُمنع مبرمجو الواجهة الأمامية من الوصول إلى دوال كهذه على مستوى نظام التشغيل، كما لا تعمل توابع تحريك النافذة وتغيير حجمها عندما تكون النافذة في وضع التكبير الكامل Maximized أو التصغير الكامل Minimized.

أي يجب فتح الصفحة التي نستطيع التحكم بعرضها كالتالي:

window.open('http://www.your.url/','yourWindowsName','width=640,height=480');

ثم يمكننا محاولة منع إطار المتصفح من أن يتم تصغيره لعرض أقل من طرف المستخدم و نقوم بعمل إعادة تعيين لعرض النافذة الخاصة بالمتصفح من خلال الحدث resize التابع لغرض window ثم تطبيق الدالة resizeTo و نمرر لها الأبعاد

function resizeToMinimum(){
// الحد الأدني للأبعاد
  var minimum    = [640, 480]; 
// الأبعاد الحالية للنافذة
  var current    = [window.outerWidth, window.outerHeight];
// تحقيقي الحد الأدني
  var restricted = [];
// للمرور على مصفوفتي العرض 
  var i          = 2;

  while(i-- > 0){
    restricted[i] = minimum[i] > current[i] ? minimum[i] : current[i];
  }

  window.resizeTo(restricted[0], restricted[1]);
}

window.addEventListener('resize', resizeToMinimum, false)

يمكنك قراءة توثيق الدالة resizeTo: developer.mozilla/docs/Web/API/Window/resizeTo

كما يوجد شيفرتين يمكنك تجريبهم في حال لم تعمل الأولى تستخدمان نفس المبدأ بحساب عرض الشاشة ومن ثم تعديل عرض النافذة:

  • تأكد من تعديل الأبعدا كما ترغب 
function resizeToMinimum(w,h){
// جلب الطول و العرض
    w=w>window.outerWidth?w:window.outerWidth;
    h=h>window.outerHeight?h:window.outerHeight;
// تحديد الطول و العرض
    window.resizeTo(w, h);
};
// حدث تعديل أبعاد النافذة
window.addEventListener('resize', function(){resizeToMinimum(100,100)}, false)
                                                            ^^^^^^^^^          // عدل العرض

*************************

  // دالة أكثر دقة في الحساب
function ensureMinimumWindowSize(width, height) {
    var tooThin = (width > window.innerWidth);
    var tooShort = (height > window.innerHeight);

    if (tooThin || tooShort) {
        var deltaWidth = window.outerWidth - window.innerWidth;
        var deltaHeight = window.outerHeight - window.innerHeight;

        width = tooThin ? width + deltaWidth : window.outerWidth;
        height = tooShort ? height + deltaHeight : window.outerHeight;

        // Edge not reporting window outer size correctly
        if (/Edge/i.test(navigator.userAgent)) {
            width -= 16;
            height -= 8;
        }

        window.resizeTo(width, height);
    }
}

var resizeTimer;
// حدث تعديل أبعاد النافذة

window.addEventListener('resize', function(event) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        ensureMinimumWindowSize(<width>,<height>);              // حدد العرض المطلوب
    }, 250);
}, false);

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...