क्रोम डेवलपर टूल में विंडो का आकार बदलते समय व्यूपोर्ट चौड़ाई दिखाएं?

Question

मैं खिड़की के दाईं ओर डॉक किए गए डेवलपर टूल के साथ क्रोम का उपयोग करता हूं। जब आप मध्य विभाजक को खींचकर व्यूपोर्ट का आकार बदलते हैं, तो विंडो विंडो के ऊपरी दाएं भाग में व्यूपोर्ट आयाम दिखाने के लिए उपयोग किया जाता था। मैंने हमेशा उत्तरदायी साइटों और मीडिया प्रश्नों के परीक्षण के लिए उपयोगी पाया है।

हाल के अपडेट के बाद से, यह गायब हो गया है। क्या इसे वापस स्विच करने का कोई तरीका है?

मै मैक पर नवीनतम संस्करण (संस्करण 49.0.2623.87) का उपयोग कर रहा हूं।

Answer 1

जैसा कि बताया गया है कि यह एक बग है। जब आप आकार

window.addEventListener('resize', function(event){ 
    console.log(window.innerWidth); 
}); 

अब बस कंसोल देखने के लिए: समय के लिए एक सस्ते वैकल्पिक हल मैं का उपयोग कर अपने कंसोल में डाल रहा है जा रहा है। यह बुनियादी चौड़ाई की जांच के लिए चाल है।

var b = document.createElement('div'); 
var bS = b.style; 
bS.position = 'fixed'; 
bS.top = 0; 
bS.right = 0; 
bS.background = '#fff'; 
bS.padding = '5px'; 
bS.zIndex = 100000; 
bS.display = 'block'; 
bS.fontSize = '12px'; 
bS.fontFamily = 'sans-serif'; 
b.innerText = window.innerWidth + 'x' + window.innerHeight; 
b.addEventListener("click", function(){bS.display = 'none';}, false); 
document.body.appendChild(b); 
window.addEventListener('resize', function(event){ 
    bS.display = 'block'; 
    b.innerText = window.innerWidth + 'x' + window.innerHeight; 
}); 

Answer 2

मैं बहुत ज्यादा समय होना आवश्यक है मेरे हाथ पर .. यह एक सीएसएस संस्करण यदि आप मीडिया क्वेरी breakpoints उपयोग कर रहे हैं:

यहाँ एक संस्करण है कि पुराने रीसाइज़र नकल है। यद्यपि आप इसे दूर क्लिक नहीं कर सकते हैं, हालांकि मीडिया क्वेरी पूछने पर एनिमेशन के दौरान इसे # सेकंड के लिए दिखाना संभव हो सकता है (

body::before { 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 100000; 
    box-sizing: border-box; 
    display: block; 
    padding: 5px; 
    font-size: 12px; 
    font-family: sans-serif; 
    background: #fefaa5; 
    border: 1px solid #fff628; 
    content: 'xs'; 
} 
@media (min-width: 480px) { body::before {content: 'sm';}} 
@media (min-width: 768px) { body::before {content: 'md';}} 
@media (min-width: 992px) { body::before {content: 'lg';}} 
@media (min-width: 1200px) { body::before {content: 'xl';}}