वेब पेज पर सतह प्रो 3 की ऊंचाई प्राप्त करें

Question

मेरे पास 1920x1280 रिज़ॉल्यूशन के साथ मेरे लैपटॉप और एक भूतल प्रो 3 के लिए 1920x1080 रिज़ॉल्यूशन वाला मॉनीटर है। मैं 1920x1080 और 1920x1280 डिस्प्ले पर पूर्ण-स्क्रीन देखने के लिए डिज़ाइन किया गया एक वेब पेज विकसित कर रहा हूं।

मैंने प्रत्येक प्रदर्शन के लिए सेटिंग्स की पुष्टि की है (नीचे देखें)।

मुझे 1280 के बजाय 8xx क्यों मिल रहा है? सतह प्रो 3 की रिज़ॉल्यूशन ऊंचाई से मेल खाने के लिए मैं 1280 का मान कैसे प्राप्त कर सकता हूं?

---

1920x1080 मॉनिटर (Windows 8 पर):

1920x1280 (भूतल प्रो 3) प्रदर्शन (Windows 10 पर):

---

$(window).height() का उपयोग करना

वह मेरे लिए काम करता है: मेरी 1920x1080 मॉनिटर पर, मैं निम्नलिखित मिलता है।

---

लेकिन, मेरा 1920x1280 (भूतल प्रो 3) प्रदर्शन के लिए this question से सुझाव का उपयोग कर ...

• the accepted answer से सुझाव का उपयोग करना।

$(window).height() का उपयोग करना:

$(document).height() का उपयोग करना:

screen.height का उपयोग करना:

• सुझाव का उपयोग करना this answer से:

• this answer से सुझाव का उपयोग करना:

• सुझाव का उपयोग करना this answer से:

• this answer और this answer और this answer से सुझाव का उपयोग करना:

• this answer से इस सुझाव का उपयोग करना:

• This suggestion एक प्लगइन की एक स्वयं सिफारिश है। मैं अभी इस पर गुजर जाऊंगा।

• This suggestion कॉफी समाधान का उपयोग करता है। मैं अब के लिए जावास्क्रिप्ट और jQuery के लिए चिपके रहूंगा।

• This suggestion एक बाहरी पुस्तकालय की आवश्यकता है:

• this answer से इस सुझाव को (जो कुछ अन्य उत्तर regurgitates) का उपयोग करना। मैं अभी इस पर गुजर जाऊंगा।

• सुझाव का उपयोग करना से:

• This suggestion ऊपर कुछ अन्य उत्तर में शामिल किया गया।

---

Answer 1

ऐसा लगता है कि आपके भूतल प्रो 3 एक का उपयोग करता है ऑपरेटिंग सिस्टम 150% की व्यापक ज़ूम कारक। इसके कारण ब्राउज़र चौड़ाई 1280 और ऊंचाई 853 (1280 * 1.5 = 1920 और 853 * 1.5 = 1280 के रूप में) देता है। नियंत्रण कक्ष में विंडोज़ 'ज़ूम कारक को 100% पर स्विच करें और आपका ब्राउज़र अपेक्षित के रूप में चौड़ाई और ऊंचाई लौटाएगा।

Answer 2

1) मैं भूतल प्रो 3 का संकल्प ऊंचाई मैच के लिए 1280 के एक मूल्य कैसे प्राप्त कर सकते हैं?

आप

window.outerHeight 

की कोशिश की अभी तक है?

मैं आपके परीक्षण मामलों में देखता हूं आंतरिक हाइट। सिर्फ तुम दिखा रहा है यही कारण है कि ब्राउज़र प्रस्तुत करना देगा (पिक्सेल जूम किया जाएगा, आदि .. उपलब्ध चौड़ाई आप वास्तव में है घटते)

2) मैं क्यों मिल रही है 8xx बजाय 1280?

मूल रूप से, ब्राउज़र कई संकल्पों में एक सतत अनुभव देने के लिए टेक्स्ट/छवियों/आदि ज़ूम करेंगे .. भले ही आप इसे 1280 स्क्रीन के लिए बना रहे हों, फिर भी आपके पास आपकी उपलब्धता के लिए 8xx पिक्सल हो सकते हैं।

pixeling मैं सलाह आप पढ़ सकते हैं के बारे में अधिक जानकारी के लिए:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 3

ब्राउज़र में, आप CSS पिक्सेल की अमूर्त के साथ सौदा, शारीरिक पिक्सल के साथ नहीं। आपको बताया गया आकार सबसे अधिक संभव है (जब तक कि खेल में एक अजीब ब्राउजर बग न हो), इसलिए खिड़की की ऊंचाई 853 सीएसएस पिक्सेल है।

मेरी सलाह उस आकार के साथ काम करना होगा। मीडिया प्रश्नों के साथ अपना लेआउट समायोजित करें। ब्राउज़र को दूसरे अनुमान लगाने की कोशिश न करें; हार्डवेयर विनिर्देशों के लिए ऑप्टिमाइज़ न करें जो ब्राउज़र विक्रेता, और वेब मानकों, सक्रिय रूप से आपसे छिपाने की कोशिश कर रहे हैं।

(अगर मैं समय मैं, पर बाद में इस उत्तर का विस्तार करने की कोशिश करेंगे। अवधारणाओं का एक उचित स्पष्टीकरण एक ब्लॉग पोस्ट की लंबाई है।)

Answer 4

यहां एक समाधान है जो फ़ायरफ़ॉक्स, क्रोम, आईई 11 और एज में मेरे लिए काम करता है। मेरे पास परीक्षण करने के लिए मैक नहीं है लेकिन यह भी वहां काम करना चाहिए। आपको डिवाइस पिक्सेल अनुपात में कारक करने की आवश्यकता है।

var screenHeight = window.devicePixelRatio * screen.height; 

यह उपकरण के डीपीआई की परवाह किए बिना आप स्क्रीन आयाम दे देंगे: यहाँ एक उदाहरण (JSBin) है।

ध्यान देने योग्य एक महत्वपूर्ण बात यह है कि innerHeight (ब्राउज़र UI के बिना विंडो का आकार) और outerHeight (ब्राउज़र UI के साथ विंडो का आकार) ब्राउज़र विंडो से संबंधित है। यदि आप ब्राउज़र विंडो के आकार को जानना चाहते हैं तो आपको screen.height के बजाय उन लोगों का उपयोग करना चाहिए।