ब्राउज़र पर मीडिया के प्रश्नों काम लेकिन मोबाइल पर नहीं

वोट
0

मैं निम्नलिखित के रूप में iPhone एक्स के लिए एक मीडिया क्वेरी है:

@media screen and (min-width: 374px) and (max-width: 376px) and (min-height: 811px) and (max-height: 812px) {
  .welcome-banner {
    background-image: url('~assets/images/landing/welcome-banner-iphonex.jpg');
    background-size: cover;
    background-position: center;
    height: calc(110vh - 64px);
    display: flex;
  }
}

यह क्रोम पर पूरी तरह से काम करता है, लेकिन यह मोबाइल अपने आप में नहीं है। मैं मेटा पर व्यूपोर्ट टैग की क्या ज़रूरत है:

<meta name=viewport content=width=device-width,initial-scale=1.0>
13/01/2020 को 23:53
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
0

आपकी क्वेरी सही लगता है, लेकिन सुनिश्चित करें कि यह वास्तव में क्या इस उपकरण आप testintg जरूरतों हो रहा है। आप जावास्क्रिप्ट के साथ सांत्वना के लिए निम्न प्रवेश करके सही क्रॉस-ब्राउज़र @media (चौड़ाई) और @media (ऊंचाई) मूल्यों को प्राप्त कर सकते हैं:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(w,h);

भी पुनः जाँच initial-scaleमेटा और ज़ूम, वे व्यूपोर्ट अपने उपकरणों को खिलवाड़ हो सकता है।

इसके अलावा, कि क्वेरी बहुत बहुत विशिष्ट है। यदि आप केवल - और मैं केवल मतलब - फिर इस डिवाइस को लक्षित करने के ठीक है कि चाहते हैं, लेकिन इसे और अधिक वैश्विक प्रश्नों के लिए जी के लिए बेहतर हो सकता है, मैं आमतौर पर 320 और 767 (की तुलना में छोटे वर्ष Ipads) और शायद 480 inbetween यदि आवश्यक हो तो लक्ष्य।

14/01/2020 को 00:00
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more