सीएसएस मीडिया क्वेरी - सॉफ्ट-कीबोर्ड सीएसएस ओरिएंटेशन नियम तोड़ता है - वैकल्पिक समाधान?

Question 1

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

1280 x 800
1280 x 768
~~1024 x 768 (स्पष्ट रूप से iPad)~~ - iPad के पास यह मुद्दा नहीं है

डिवाइस ओरिएंटेशन आधारित शैली को लागू करने का सबसे सरल तरीका मीडिया क्वेरी के अभिविन्यास का उपयोग करके वाक्यविन्यास का उपयोग करना है।

@media all and (orientation:portrait)
{
  /* My portrait based CSS here */
}

@media all and (orientation:landscape)
{
  /* My landscape based CSS here */
}

यह सभी टैबलेट उपकरणों पर पूरी तरह से ठीक काम करता है। लेकिन , समस्या यह है कि जब डिवाइस पोर्ट्रेट मोड में है और उपयोगकर्ता किसी भी इनपुट फ़ील्ड (जैसे। सर्च) पर सॉफ्ट-कीबोर्ड पॉप अप करता है - जो वेब पेज के दृश्य क्षेत्र को कम करता है और इसे लैंडस्केप आधारित सीएसएस में प्रस्तुत करने के लिए मजबूर करता है। एंड्रॉइड टैबलेट उपकरणों पर, यह कीबोर्ड की ऊंचाई पर निर्भर करता है। तो, अंततः वेब पेज टूटा हुआ दिखता है। इसलिए, मैं अभिविन्यास पर आधारित शैलियों को लागू करने के लिए CSS3 के अभिविन्यास मीडिया क्वेरी का उपयोग नहीं कर सकता (जब तक कि उन्मुखीकरण को लक्षित करने के लिए बेहतर मीडिया क्वेरी नहीं है)। यहाँ एक फिडेल है http://jsfiddle.net/hossain/S5nYP/5/ जो इसका अनुकरण करता है - डिवाइस परीक्षण के लिए पूर्ण परीक्षण पृष्ठ का उपयोग करें - http://jsfiddle.net/S5nYP/embedded/result/

यहाँ डेमो पेज से लिए गए व्यवहार का स्क्रीनशॉट है। यहां छवि विवरण दर्ज करें

तो, क्या इस समस्या को हल करने का कोई विकल्प है, मैं जावास्क्रिप्ट आधारित समाधान के लिए खुला हूं यदि देशी सीएसएस आधारित समाधान काम नहीं करता है।

मुझे http://davidbcalhoun.com/2010/deal-with-device-orientation पर एक स्निपेट मिला जिसमें क्लास को जोड़ने और उसके आधार पर लक्ष्य बनाने का सुझाव दिया गया है। उदाहरण के लिए:

<html class="landscape">
  <body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1>
    <!-- .... more... ->

# CSS
.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }

आप लोग इस बारे में क्या सोचते हैं? क्या आपके पास बेहतर समाधान है?

Question 2

मुझे पता है कि यह कुछ साल की देरी है, लेकिन मुझे एक महान समाधान मिला

परिदृश्य मीडिया के लिए:

@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}

और चित्र मीडिया के लिए:

@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}

पूर्ण समाधान और यह क्यों काम करता है यहां माइकल बैरेट - एंड्रॉइड ब्राउज़र चुनौतियों का पता लगाया जा सकता है

संपादित करें: यह लिंक अब समाप्त हो गया है, लेकिन इंटरनेट संग्रह पर एक स्नैपशॉट पाया जा सकता है: माइकल बैरेट - एंड्रॉइड ब्राउज़र चुनौतियां

Question 3

समस्या इस तरह से है कि अभिविन्यास की गणना की जाती है:

http://www.w3.org/TR/css3-mediaqueries/#orientation

। अभिविन्यास ’मीडिया फीचर 'पोर्ट्रेट’ है जब। ऊंचाई ’मीडिया फीचर का मान। चौड़ाई’ मीडिया फीचर के मूल्य से अधिक या उसके बराबर होता है। अन्यथा 'ओरिएंटेशन' 'लैंडस्केप' है।

चूँकि ऊँचाई / चौड़ाई की गणना दृश्य व्यूपोर्ट पर की जाती है, सॉफ्ट कीबोर्ड स्पष्ट रूप से उन्मुखता का कारण बनता है ताकि व्यूपोर्ट की चौड़ाई ऊँचाई से कम हो। एक समाधान सिर्फ आपके मीडिया के प्रश्नों का उपयोग करना होगाwidth । यह अभिविन्यास की परवाह किए बिना उपकरणों में अधिक लचीला बनाता है, चौड़ाई / ऊंचाई का उल्लेख नहीं करने के लिए उन्मुखीकरण की तुलना में अधिक व्यापक रूप से समर्थित है।

यदि आप अभिविन्यास के बजाय चौड़ाई के लिए खाता चाहते हैं, तो मैं उदाहरण के रूप में iPhone का उपयोग करूंगा:

@media screen and (max-width: 320px) {
  /* rules applying to portrait */
}

@media screen and (max-width: 480px) {
  /* rules applying to landscape */
}

यह दृष्टिकोण अभिविन्यास से अधिक लचीला है क्योंकि प्रश्न उपकरणों / उपयोगकर्ता-एजेंटों तक सीमित नहीं हैं जो अभिविन्यास का समर्थन करते हैं, न कि उस अभिविन्यास का उल्लेख करने के लिए जो आपको बहुत कम बताता है बनाम चौड़ाई ।

बेशक, अगर आपको वास्तव में अभिविन्यास जानने की आवश्यकता है, तो ऐसा लगता है कि शुरू में कक्षा की स्थापना करें और बस उसका उपयोग करें जो आपका सबसे अच्छा विकल्प हो सकता है।

Question 4

एक वैकल्पिक उपयोग हो सकता है device-aspect-ratio, जो अपरिवर्तित रहता है। हालांकि, वेबकिट में, डिवाइस को घुमाने से इस क्वेरी का उपयोग करके सीएसएस नियमों का एक अद्यतन ट्रिगर नहीं होता है, भले ही जावास्क्रिप्ट परीक्षण नए पहलू अनुपात के लिए सही हो। यह स्पष्ट रूप से बग के कारण है , लेकिन मैं बग रिपोर्ट नहीं ढूंढ पा रहा हूं। के संयोजन का उपयोग करना orientationऔर {min,max}-device-aspect-ratioठीक काम करना लगता है:

@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait)
@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape)

orientationट्रिगर्स का उपयोग अपेक्षा के अनुसार अद्यतन करता है, और पुनर्स्थापना के उपयोग device-aspect-ratioने अभिविन्यास के वास्तविक परिवर्तनों के लिए अद्यतन किया है।

Question 5

मैंने ऊपर सूचीबद्ध विकल्पों के माध्यम से काम किया और किसी ने भी मेरे लिए मुद्दों को तय नहीं किया। मैंने screen.availHeight का उपयोग करने के लिए स्विच किया क्योंकि यह कीबोर्ड प्रदर्शन समस्या से बचने के लिए लगातार ऊंचाई परिणाम देता है।

// Avoiding the keyboard in Android causing the portrait orientation to change to landscape. 
// Not an issue in IOS. Can use window.orientation.
var currentOrientation = function() {
  // Use screen.availHeight as screen height doesn't change when keyboard displays.  
  if(screen.availHeight > screen.availWidth){
    $("html").addClass('portrait').removeClass('landscape'); 
  } else {
    $("html").addClass('landscape').removeClass('portrait'); 
  }
}

// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
$(window).on("resize", currentOrientation);

Question 6

मेरे लिए, इसने यह चाल चली:

  @media screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1){
        /*Portrait Mode*/
};

जबकि max-aspect-ratioविंडो (पीसी और अन्य लैंडस्केप-केवल उपकरणों के लिए उपयोगी) को आकार देकर पोर्ट्रेट मोड को ट्रिगर करने का ख्याल रखता है, max-device-aspect-ratioचर अभिविन्यास वाले स्मार्टफोन या अन्य उपकरणों के साथ मदद करता है। और क्योंकि मैं लैंडस्केप मोड के लिए विशिष्ट सेटिंग्स की घोषणा नहीं कर रहा हूं, भले हीmax-aspect-ratio सिस्टम> 1 को रिपोर्ट कर रहा हो पोर्ट्रेट मोड द्वारा ट्रिगर किया जाएगाmax-device-aspect-ratio अगर एंड्रॉइड डिवाइस इस तरह से उन्मुख होता है ।

1/1हिस्सा मूल रूप से मतलब है कि अगर अनुपात <= 1 है, यह पोर्ट्रेट मोड में चला जाता है, अन्यथा यह लैंडस्केप मोड में चला जाता है।

Question 7

मैंने ऊपर दिए गए कई जवाबों के माध्यम से चलाया है और उनमें से किसी ने भी मैं क्या चाहता था, जो कि संभव के रूप में निकटता से iPhone कार्यक्षमता की नकल करने के लिए है। निम्नलिखित है जो अब उत्पादन में मेरे लिए काम कर रहा है।

यह भविष्य की जाँच के लिए एक डेटा विशेषता के लिए डिवाइस व्यूपोर्ट की खिड़की की चौड़ाई और ऊंचाई निर्दिष्ट करके काम करता है। चूंकि फोन कीबोर्ड को खींचते समय चौड़ाई का आकार नहीं बदलता है, केवल ऊंचाई, अनुपात की जांच और मूल चौड़ाई के खिलाफ चौड़ाई आपको बता सकती है कि क्या कीबोर्ड ऊपर है। मुझे एक उपयोग मामला नहीं मिला है यह अभी तक विफल रहा है, लेकिन मुझे यकीन है कि मैं करूंगा। यदि आप सभी को एक मिल जाए, तो कृपया मुझे बताएं।

मैं कुछ ग्लोबल्स का उपयोग कर रहा हूं, जैसे InitialRun और MobileOrientation, जो js स्विचिंग के लिए उपयोग किए जाते हैं, मैं सीएसएस हेरफेर के लिए DOM में जानकारी संग्रहीत करने के लिए html5 डेटा-विशेषताओं का भी उपयोग कर रहा हूं।

    var InitialRun = true; // After the initial bootstrapping, this is set to false;
    var MobileOrientation = 'desktop';
    function checkOrientation(winW, winH){ // winW and winH are the window's width and hieght, respectively
        if (InitialRun){
            if (winW > winH){
                $('body').attr('data-height',winW);
                $('body').attr('data-width',winH);
                MobileOrientation = 'landscape';    
                $('body').attr('data-orientation','landscape'); 
            }
            else{
                $('body').attr('data-height',winH);
                $('body').attr('data-width',winW);
                MobileOrientation = 'portrait';
                $('body').attr('data-orientation','portrait');
            }
        }
        else{
            if (winW > winH && winW != $('body').data('width')){
                MobileOrientation = 'landscape';    
                $('body').hdata('orientation','landscape'); //TODO:uncomment
                $('body, #wrapper').css({'height':"100%",'overflow-y':'hidden'});
                //$('body').attr('data-orientation','portrait');
            }
            else{
                MobileOrientation = 'portrait';
                $('body').attr('data-orientation','portrait');
                $('body, #wrapper').css({'height':$('body').data('height'),'overflow-y':'auto'});
            }
        }

    }

Question 8

मैंने इस समस्या को हल करने के लिए एक सरल चाल का उपयोग किया

@media (max-width: 896px) and (min-aspect-ratio: 13/9){/* Landscape content*/}

मुझे अधिकतम-चौड़ाई मिली: 896px का उपयोग सभी मोबाइल डिवाइस के लिए किया जा सकता है। इस समाधान की कोशिश करो यह काम करता है!

Question 9

इस लिंक पर एक नज़र डालें: http://www.alistapart.com/articles/a-pixel-identity-crisis/
केवल ओरिएंटेशन पर निर्भर नहीं है, बल्कि मदद भी max-device-heightकर device-pixel-ratioसकता है या कर सकता है। वैसे भी, मैंने इसका परीक्षण नहीं किया, इसलिए सुनिश्चित नहीं हूं कि यह मदद करेगा।

Question 10

विचार: अपनी मीडिया क्वेरी के पोर्ट्रेट पैरामीटर को लें और इसे केवल मिन-चौड़ाई के साथ छोड़ दें। उस मीडिया क्वेरी में पोर्ट्रेट मोड के लिए अपनी सामान्य स्टाइलिंग करें। फिर, एक न्यूनतम ऊंचाई के साथ लैंडस्केप मोड के लिए एक और मीडिया क्वेरी बनाएं, ताकि कीबोर्ड पॉप अप होने पर ब्राउज़र उस क्वेरी का उपयोग न करे। आपको यह प्रयोग करने की आवश्यकता होगी कि यह have लंबा पर्याप्त न्यूनतम ऊंचाई ’क्या है, लेकिन यह बहुत मुश्किल नहीं होना चाहिए क्योंकि (यदि सभी नहीं) लैंडस्केप मोड की ऊंचाई एक कीबोर्ड की पॉप अप होने पर आपकी ऊंचाई से अधिक होती है। इसके अतिरिक्त, आप क्वेरी के दायरे को सीमित करने के लिए पोर्ट्रेट दृश्य (यानी लगभग ~ 400px) में सबसे स्मार्ट फोन परिदृश्य परिदृश्य क्वेरी के लिए एक 'मिनट-चौड़ाई' जोड़ सकते हैं।

यहां एक वैकल्पिक (और टेनसेंट) समाधान दिया गया है: - अपने html में एक खाली मनमाना तत्व जोड़ें जिसमें पोर्ट्रेट मोड के अलावा किसी अन्य चीज में 'डिस्प्ले: कोई नहीं' होगा। - इनपुट के लिए एक jquery या जावास्क्रिप्ट श्रोता बनाएँ: फ़ोकस करें। जब किसी इनपुट पर क्लिक किया जाता है, तो आपकी जावास्क्रिप्ट मनमानी तत्व की प्रदर्शन संपत्ति की जांच करती है। यदि यह पोर्ट्रेट मोड के दौरान 'ब्लॉक' या जो भी आप इसे सेट करता है, उसे लौटाता है, तो आप जेएस के साथ अपने पोर्ट्रेट मोड प्रश्नों के साथ अपनी स्टाइल को ओवरराइड कर सकते हैं। इसके विपरीत, आपके पास एक इनपुट होगा: आप को हार्ड-कोडित तत्वों के style.cssText गुणों को खाली करने के लिए धब्बा श्रोता।

मैं अभी खुद इसके साथ प्रयोग कर रहा हूं - जब मैं कुछ ठोस और प्रबंधनीय हो जाता हूं तो मैं उन कोडों को पोस्ट करता हूं। (मेरा पहला समाधान सबसे उचित लगता है)।

Question 11

यह मेरे लिए मज़बूती से काम करता है। मैं $ .browser.mobile का पता लगाने के लिए jQuery एक्सटेंशन के लिए http://detectmobilebrowsers.com/ का उपयोग कर रहा हूं ।

if ($.browser.mobile) {
  var newOrientationPortrait = true;

//Set orientation based on height/width by default
  if ($(window).width() < $(window).height())
      newOrientationPortrait = true;
  else
      newOrientationPortrait = false;

//Overwrite orientation if mobile browser supports window.orientation
if (window.orientation != null)
    if (window.orientation === 0)
        newOrientationPortrait = true;
    else
        newOrientationPortrait = false;

यहाँ ओरिएंटेशन के आधार पर व्यूपोर्ट को संशोधित करने का मेरा कोड है। यह फ़ंक्शन केवल मोबाइल उपकरणों के लिए कहा जाता है, टैबलेट भी नहीं। यह मुझे आसानी से 400px और 800px (पोर्ट्रेट बनाम लैंडस्केप) के लिए सीएसएस लिखने की अनुमति देता है।

_onOrientationChange = function() {
    if (_orientationPortrait) 
        $("meta[name=viewport]").attr("content", "width=400,user-scalable=no");
    else 
        $("meta[name=viewport]").attr("content", "width=800");
}

मेरी आवश्यकताओं की प्रकृति के कारण मैं अकेले सीएसएस मीडिया के प्रश्नों में ऐसा करने में सक्षम नहीं था, क्योंकि स्वयं डोम को उन्मुखीकरण के आधार पर बदलने की आवश्यकता थी। दुर्भाग्य से मेरी नौकरी पर, व्यवसाय के लोग विकास की सलाह के बिना सॉफ्टवेयर आवश्यकताओं को लिखते हैं।

Question 12

मुझे आईपैड में ठीक उसी मुद्दे का सामना करना पड़ा।
अर्थात; जब सॉफ्ट कीबोर्ड पोर्ट्रेट मोड में दिखाई देता है, तो डिवाइस को लैंडस्केप ओरिएंटेशन में पाया जाता है और परिदृश्य के लिए शैलियों को स्क्रीन पर लागू किया जाता है, जिसके परिणामस्वरूप गड़बड़ दृश्य दिखाई देता है।

डिवाइस की विशिष्टता

डिवाइस : आईपैड मिनी 4
OS : iOS 11.2.6
स्क्रीन रिज़ॉल्यूशन : 1024 x 768

दुर्भाग्य से, मेरे लिए, इस समाधान ने काम नहीं किया।

@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}
@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}

इसलिए, मैंने जो किया है, मैंने अपने पोर्ट्रेट मोड के लिए इस तरह से एक मीडिया क्वेरी लिखी है।

@media only screen and (min-width : 300px) and (max-width : 768px) and (orientation : landscape) {
/* portrait styles, when softkeyboard appears, goes here */
}

अर्थात; जब नरम कीबोर्ड दिखाई देता है, तो स्क्रीन की ऊंचाई कम हो जाती है, लेकिन स्क्रीन की चौड़ाई 768px तक रहती है, जिसके परिणामस्वरूप मीडिया क्वेरी स्क्रीन को लैंडस्केप ओरिएंटेशन के रूप में पहचानती है। इसलिए ऊपर दिए गए काम के आसपास।

Question 13

चूंकि iPhone 11 प्रो मैक्स व्यूपोर्ट 414 x 896 पीएक्स है - उन्मुखीकरण के लिए पर्याप्त होना चाहिए: न्यूनतम चौड़ाई के साथ परिदृश्य: 500px