IPhone को वेब-ऐप में `select` पर जूम करने से रोकें

Question

मुझे यह कोड मिला है:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

IPhone पर एक फुल-स्क्रीन वेब-ऐप में चल रहा है।

जब इस सूची में से कुछ का चयन किया जाता है, तो iPhone select-element पर ज़ूम करता है । और कुछ का चयन करने के बाद वापस ज़ूम आउट नहीं करता है।

मेरे द्वारा इसे कैसे रोका जा सकता है? या वापस बाहर ज़ूम?

Answer 1

यह शायद इसलिए है क्योंकि ब्राउज़र क्षेत्र को ज़ूम करने की कोशिश कर रहा है क्योंकि फ़ॉन्ट का आकार सीमा से कम है, यह आमतौर पर आईफोन में होता है।

मेटाटैग विशेषता "उपयोगकर्ता-स्केलेबल = नहीं" देने से उपयोगकर्ता को अन्यत्र ज़ूम करने से प्रतिबंधित किया जाएगा। चूंकि समस्या केवल चुनिंदा तत्व के साथ है , इसलिए अपने सीएसएस में निम्नलिखित का उपयोग करने का प्रयास करें, यह हैक मूल रूप से jquery मोबाइल के लिए उपयोग किया जाता है।

HTML:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

सीएसएस:

select{
font-size: 50px;
}

src: iphone में सेलेक्ट करने के बाद अनज़ूम

Comments

यदि पाठ दिखाई देता है (जैसा कि मेरे मामले में) ऐसा लगता है कि ज़ूम को सक्षम करने से पहले 16px न्यूनतम है।

— मार्लोन क्रिएटिव

बस इसे और अधिक स्पष्ट करने के लिए, यह रेखा ऑटोसालिंग को रोकेगी:$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');

— अब्बास

पाठ कब से चुनिंदा तत्व में छिपा है ?? "कोई लेआउट मुद्दों को नहीं लाएगा"

— बिल

@ मेरे कहने का मतलब है, जब फ़ॉन्ट-आकार को 50px का मान दिया जाता है, तो यह ड्रॉपडाउन की तुलना में अन्य HTML तत्वों पर अजीब लगता है, जिसे मैंने लेआउट मुद्दा कहा था।

— ससी धर

लेकिन अगर आपको उपयोगकर्ता के स्केलेबल को एक्सेसेबिलिटी के मुद्दों के लिए अनुमति देने की आवश्यकता है या किसी अन्य कारण से नीचे दिए गए जवाब देखें stackoverflow.com/questions/6483425/…

— gota

Answer 2

उपयोगकर्ता-स्केलेबल = नहीं, जो आपको चाहिए, बस इसलिए कि वास्तव में इस प्रश्न का एक निश्चित उत्तर है

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Comments

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

— डैन स्मार्ट

@DanSmart, कम से कम मेरे मामले में (और मुझे नहीं पता कि यह अलग करता है), न्यूनतम / अधिकतम पैमाने पर्याप्त नहीं था - उपयोगकर्ता-स्केलेबल जोड़ना = कोई फर्क नहीं पड़ा।

— कोरोला

यह बहुत भारी हाथ वाले दृष्टिकोण की तरह लगता है - मैं उपयोगकर्ता-स्केलेबल = सावधानी के साथ उपयोग करने की सलाह देता हूं। Dev.Opera से , "यह पूरी तरह से ज़ूमिंग को बंद करने के लिए भी संभव है, हालांकि ध्यान रखें कि ज़ूमिंग एक महत्वपूर्ण एक्सेसिबिलिटी सुविधा है जो बहुत सारे लोगों द्वारा उपयोग की जाती है। इसे बंद करना इसलिए केवल तभी होता है जब वास्तव में आवश्यक हो, जैसे कि। कुछ प्रकार के खेल और अनुप्रयोग। "

— चार्ली स्टैनार्ड

उपयोगकर्ता-स्केलेबल को iOS 10 के रूप में नजरअंदाज कर दिया गया है

— निकल्डन

जब आपका फ़ॉन्ट 16px से बड़ा हो जाता है, तो इनपुट पर ध्यान केंद्रित करने पर ब्राउज़र ज़ूम आउट कर सकता है। मेरे लिए, मुझे केवल जोड़ने की आवश्यकता थी minimum-scale=1, जो उपयोगकर्ता को ज़ूम करने की संभावना को भी बनाए रखता है।

— मिक्रो

Answer 3

यह इस मुद्दे को संबोधित करने में मेरे मामले के लिए काम करने के लिए लग रहा था:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

सुझाए गए यहाँ से क्रिस्टीना Arasmo Beymer

Comments

मेरे मामले में IOS 7x पुराने उपयोगकर्ता-स्केलेबल के लिए पर्याप्त नहीं था। ऊपर शेयर करने के लिए ट्रिक ने धन्यवाद दिया।

— उतरा

Answer 4

यदि पाठ 16 पिक्सेल से कम पर सेट है, तो iPhone का स्वरूप फ़ील्ड को थोड़ा ज़ूम करेगा । मेरा सुझाव है कि मोबाइल फ़ॉर्म फ़ील्ड के टेक्स्ट को 16 पिक्सेल पर सेट करें और फिर डेस्कटॉप के लिए वापस आकार को ओवरराइड करें।

ज़ूम को अक्षम करने के लिए कहे जाने वाले उत्तर आंशिक रूप से देखे जाने वाले उपयोगकर्ताओं के लिए अनपेक्षित हैं जो अभी भी छोटे मोबाइलों पर ज़ूम करना चाहते हैं।

उदाहरण:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Comments

अच्छी बात है! लेकिन क्या होगा यदि मेरा पाठ चयन बॉक्स की पूरी चौड़ाई को ओवरफ्लो करता है? मैं इस मामले में क्या कर सकता हूं?

— gota

यदि आपका शुरुआती विकल्प संदेश पर फिट बैठता है, तो यह पर्याप्त होना चाहिए। जैसा कि एक बार उन्होंने एक विकल्प का चयन किया है, भले ही थोड़े से काटे जाने पर उन्हें याद होगा कि यह क्या था। लेकिन हाँ, एक समस्या और है अगर यह कहती है "कृपया एक सह चुनें ..."

— मार्टिवर्डवर्ड

यह जवाब काम करता है और कम से कम आपत्तिजनक तरीका पेश करता है। धन्यवाद!

— DeBraid

Answer 5

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

चूंकि iPhone 16 से कम पिक्सेल पर सेट होने पर फ़ील्ड को थोड़ा ज़ूम करेगा, इसलिए हम यह सोचने के लिए iPhone को ट्रिक कर सकते हैं कि फ़ॉन्ट का आकार 16px है और फिर इसे हमारे आकार में बदल दें।

उदाहरण के लिए, जब हमारा पाठ 14px है, तो उदाहरण लेते हैं, इसलिए यह ज़ूम करता है क्योंकि यह 16px से छोटा है। इसलिए हम 0.875 के अनुसार पैमाने को बदल सकते हैं।

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

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

मुझे उम्मीद है यह मदद करेगा!

Comments

यह एक बुरा है, लेकिन चतुर हैक भी है और मुझे हैक पसंद नहीं है ... लेकिन इस मामले में यह इस पृष्ठ पर सबसे अच्छा जवाब है और कोई विकल्प नहीं है यदि आपको ज़ूम को रोकना है और फिर भी यह डिज़ाइन को बनाए रखना चाहता है। । आपका बहुत बहुत धन्यवाद! :)

— roNn23

Answer 6

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

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DiscPinchZoom को onchange से पहले निकाल दिया जाएगा ताकि ज़ूम उस समय अक्षम हो जाएगा जब onchange को निकाल दिया जाता है। ऑन्चेंज फ़ंक्शन पर, अंत में आप प्रारंभिक स्थिति को पुनर्स्थापित कर सकते हैं।

एक iPhone 5S पर परीक्षण किया गया

Answer 7

अगर किसी का फॉन्ट-साइज 16px से कम है, तो iOS बड़ा इनपुट फील्ड दिखाने के लिए पेज को जूम करता है।

केवल किसी भी फ़ील्ड पर क्लिक करने पर, वह पृष्ठ को ज़ूम कर रहा है। इसलिए क्लिक करने पर, हम इसे 16px के रूप में बना रहे हैं और फिर इसे डिफ़ॉल्ट मान में बदल दिया गया है

नीचे स्निपेट मेरे लिए ठीक काम करता है और मोबाइल उपकरणों के लिए लक्षित है,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

Answer 8

सभी 'चयन' फ़ॉन्ट का आकार 16px पर सेट करें

चयन {फ़ॉन्ट-आकार: 16 पीएक्स; }

Answer 9

मुझे नहीं लगता कि आप अलगाव में व्यवहार के बारे में कुछ नहीं कर सकते।

एक चीज़ जो आप आज़मा सकते हैं, वह पृष्ठ को बिल्कुल ज़ूम करके रखने की है। यह अच्छा है अगर आपका पेज फोन के लिए डिज़ाइन किया गया है।

<meta name="viewport" content="width=device-width" />

दूसरी चीज़ जो आप आज़मा सकते हैं, वह सामान्य "सेलेक्ट" स्टेटमेंट के बजाय जावास्क्रिप्ट कंस्ट्रक्शन का उपयोग कर रही है। अपना मेनू दिखाने के लिए एक छिपा हुआ डीवा बनाएँ, क्लिक को जावास्क्रिप्ट में संसाधित करें।

सौभाग्य!

Answer 10

जैसा कि यहां उत्तर दिया गया है: इनपुट "टेक्स्ट" टैग में ऑटो ज़ूम अक्षम करें - आईफोन पर सफारी

आप यूजर इनपुट के दौरान टेक्स्ट फ़ील्ड को स्वचालित रूप से ज़ूम इन करने से रोक सकते हैं , उपयोगकर्ता की ज़ूम को चुटकी में अक्षम किए बिना । बस जोड़ें, maximum-scale=1लेकिन अन्य उत्तरों में सुझाए गए उपयोगकर्ता-स्केल विशेषता को छोड़ दें।

यह एक सार्थक विकल्प है यदि आपके पास एक ऐसी परत है जिसमें ज़ूम होने पर "फ़्लोट" किया जाता है, जिससे महत्वपूर्ण UI तत्व स्क्रीन को स्थानांतरित कर सकते हैं।

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 11

IOS की डिफ़ॉल्ट स्टाइल को अक्षम करने के लिए इस CSS को जोड़ने का प्रयास करें:

-webkit-appearance: none;

यह अन्य तत्वों पर भी काम करेगा जो विशेष स्टाइल प्राप्त करते हैं, जैसे इनपुट [प्रकार = खोज]।

Answer 12

इस पर कुछ घंटों के लिए पढ़ने और सबसे अच्छा समाधान यहाँ इस jquery है। यह आईओएस सफारी में "अगले टैब" विकल्प के साथ भी मदद करता है। मेरे पास यहां भी इनपुट्स हैं, लेकिन बेझिझक उन्हें हटा सकते हैं या जैसे चाहें जोड़ सकते हैं। मूल रूप से मूसडाउन फोकस इवेंट से पहले फायर करता है और ब्राउजर को इसके 16px के बारे में सोचता है। इसके अलावा, फ़ोकसआउट "अगली टैब" सुविधा पर ट्रिगर होगा और प्रक्रिया को दोहराएगा।

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})