स्क्रोलबार के बिना (माइनस) स्क्रीन की चौड़ाई कैसे प्राप्त करें?

Question

मेरे पास एक तत्व है और इसके बिना चौड़ाई (!) ऊर्ध्वाधर स्क्रॉलबार की आवश्यकता है।

फायरबग मुझे बताता है कि शरीर की चौड़ाई 1280px है।

फ़ायरफ़ॉक्स में इनमें से कोई भी काम ठीक है:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

वे सभी 1263px वापस करते हैं , जो कि वह मूल्य है जिसकी मुझे तलाश है।

हालाँकि अन्य सभी ब्राउज़र मुझे 1280px देते हैं ।

वहाँ एक पार ब्राउज़र तरीका है (?) ऊर्ध्वाधर स्क्रॉलबार के बिना एक फुलस्क्रीन चौड़ाई पाने के लिए?

Comments

क्या आपको ऊर्ध्वाधर स्क्रॉलबार की आवश्यकता है? या क्या आप अतिप्रवाह का उपयोग कर सकते हैं: छिपी हुई और फिर चौड़ाई की गणना करें?

— फ़िलिप

आप अपने प्रश्न के लिए इस साइट का उल्लेख कर सकते हैं stackoverflow.com/questions/8794338/…

आप कोशिश कर सकते हैंwidth: 100%;

— www139

क्या आप स्क्रीन की संपूर्ण चौड़ाई को स्क्रॉल पट्टियों में शामिल नहीं करने का प्रयास कर रहे हैं?

— www139

Answer 1

.prop("clientWidth") तथा .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

में जावास्क्रिप्ट :

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{पुनश्च: ध्यान दें कि scrollWidthमज़बूती से उपयोग करने के लिए आपके तत्व को क्षैतिज रूप से अतिप्रवाह नहीं होना चाहिए}

jsBin डेमो

---

आप भी उपयोग कर सकते हैं .innerWidth()लेकिन यह केवल bodyतत्व पर काम करेगा

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

Comments

यह काम नहीं करेगा यदि किसी कारण से आपने शरीर तत्व की चौड़ाई बदल दी।

— कोनस्टेंटिन पेरियासलोव

ऐसा लगता है कि यह वास्तव में क्रोम पर किसी भी अधिक काम नहीं करता है, रिपोर्ट की गई चौड़ाई वास्तव में खिड़की से 20 गुना बड़ी है, मैंने कई चौड़ाई माप की कोशिश की है, लेकिन कुछ भी नहीं।

— सम्मे

@Sammaye जिसके कारण आप भूल गए हैं (क्यों?) मार्जिन सेट करने के लिए: 0; BODY या एक सामान्य CSS रीसेट कोड का उपयोग करें। jsbin.com/homixuqi/2/edit । तो फिर, कोड पूरी तरह से ठीक काम करता है ।

— रोको सी। बुल्जन

@NanGoGo यह वेब डिजाइनर के रूप में आपका काम है कि शरीर की चौड़ाई के साथ गड़बड़ी को रोकने के लिए। यह कोई मुश्किल काम नहीं है। इसके अलावा, ऊंचाई के बारे में यह निर्भर करता है कि आपका bodyओवरफ्लो है या नहीं। यदि यह विवश की तुलना में अधिक है।

— राको सी। बुल्जन

@ RokoC.Buljan मैं यहाँ आपसे असहमत नहीं हूँ। बेशक कोई अच्छा वेब डिजाइनर / डेवलपर को शरीर की चौड़ाई और सामान के साथ खिलवाड़ करना चाहिए। मेरा बिंदु उपलब्ध सबसे विश्वसनीय एपीआई का उपयोग करने के बारे में था। कुछ जावास्क्रिप्ट डेवलपर्स प्लग-इन आदि का निर्माण कर सकते हैं और पूरे पृष्ठ का नियंत्रण नहीं हो सकता है।

— नमन गोएल

Answer 2

आप बस लिखकर वेनिला जावास्क्रिप्ट का उपयोग कर सकते हैं:

var width = el.clientWidth;

आप दस्तावेज़ की चौड़ाई प्राप्त करने के लिए इसका उपयोग इस प्रकार कर सकते हैं:

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

स्रोत: एमडीएन

आप स्क्रॉलबार सहित पूरी विंडो की चौड़ाई भी प्राप्त कर सकते हैं, इस प्रकार है:

var fullWidth = window.innerWidth;

हालाँकि, यह सभी ब्राउज़रों द्वारा समर्थित नहीं है, इसलिए एक कमबैक के रूप में, आप docWidthऊपर के रूप में उपयोग करना चाहते हैं , और स्क्रॉलबार चौड़ाई पर जोड़ सकते हैं ।

स्रोत: एमडीएन

Comments

स्क्रॉलबार

— Jan

document.documentElement.clientWidthमुझे सबसे अधिक मदद मिली, क्योंकि यह ऊंचाई के लिए भी काम करता है ( innerHeightयदि शरीर पृष्ठ को नहीं भरता है, तो छोटा हो सकता है, आदि) और स्क्रॉलबार के बिना मान मिलता है।

— user4642212

document.documentElement.clientWidth असली विजेता है। document.body.clientWidth तब तक ठीक है जब तक कि आपके शरीर के तत्व पर न्यूनतम-चौड़ाई सेट न हो और ब्राउज़र वर्तमान में न्यूनतम चौड़ाई से छोटा हो।

— कोडमेकिन

Answer 3

यहाँ कुछ उदाहरण दिए गए हैं जो मानते हैं $elementकि एक jQueryतत्व है:

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

Answer 4

इसे इस्तेमाल करे :

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

आप इस कोड का उपयोग करके स्क्रॉल पट्टी के साथ और बिना स्क्रीन की चौड़ाई प्राप्त कर सकते हैं। यहां, मैंने bodyस्क्रॉलबार के साथ और बिना इसकी चौड़ाई मान को बदल दिया है ।

Comments

मुझे इस पर भी भरोसा करना था। उपर्युक्त उत्तर मेरे लिए काम नहीं किए

— valerio0999

मेरा समय बचाया! अनेक अनेक धन्यवाद!

— Xonshiz

Answer 5

स्क्रॉलबार के बिना सही चौड़ाई और ऊंचाई प्राप्त करने का सबसे सुरक्षित स्थान HTML तत्व से है। इसे इस्तेमाल करे:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

IE 9 और इसके साथ ब्राउज़र समर्थन काफी सभ्य है। OLD IE के लिए, यहां बताई गई कई कमियों में से एक का उपयोग करें।

Answer 6

मैंने एक ऐसी ही समस्या का अनुभव किया और width:100%;मेरे लिए इसे हल किया। मैं इस सवाल का जवाब देने की कोशिश करने के बाद इस समाधान पर आया और यह महसूस किया कि बहुत ही स्वभाव की प्रकृति <iframe>इन जावास्क्रिप्ट माप उपकरणों को कुछ जटिल फ़ंक्शन का उपयोग किए बिना गलत कर देगी। 100% करना एक iframe में इसकी देखभाल करने का एक सरल तरीका है। मुझे आपके मुद्दे के बारे में पता नहीं है क्योंकि मुझे यकीन नहीं है कि आप HTML तत्वों में क्या हेरफेर कर रहे हैं।

Answer 7

इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया, हालांकि मैं इसे चौड़ाई लेने और घटाने के द्वारा इसे ठीक करने में सक्षम था स्क्रॉल बार चौड़ाई को । मुझे यकीन नहीं है कि यह क्रॉस-ब्राउज़र संगत कैसे है।

Answer 8

यहाँ मैं क्या उपयोग है

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});