मैं iPhone / iOS पर टेलीफोन नंबरों की नीली स्टाइल कैसे निकालूं?

Question

क्या iPhone पर देखे जाने पर टेलीफ़ोन नंबर से डिफ़ॉल्ट ब्लू हाइपरलिंक रंग को हटाने का कोई तरीका है? जोड़ने के लिए एक विशिष्ट मोबाइल सफारी टैग या सीएसएस की तरह?

मेरे पास केवल इस संख्या के लिए जगह है:

<p id="phone-text">Call us on <strong>[phone]</strong></p>

और कोई हाइपरलिंक नहीं हैं, लेकिन iPhone अभी भी इस टेक्स्ट नंबर को हाइपरलिंक के रूप में प्रस्तुत करता है। मेरी कुछ वेबसाइटों पर यह रेंडरिंग मुद्दा है, लेकिन यह नहीं देख सकता कि ऐसा क्यों हो रहा है।

मैंने यह पोस्ट पढ़ी:

मोबाइल HTML रेंडरिंग नंबर

लेकिन क्या यह एकमात्र समाधान संभव है?

Comments

पूरी तरह से निश्चित नहीं है कि क्या यह वही है, क्या आप कृपया जांच कर सकते हैं? stackoverflow.com/questions/3712475/…

— Pekka

@Pekka: मुझे लगता है कि यह प्रश्न समान है लेकिन अलग है। यह एक फोन नंबर के रूप में गलत तरीके से व्याख्या करने से कुछ को रोकने के बारे में था। ऐसा प्रतीत होता है कि असली फोन नंबर आपके डिज़ाइन को खराब करने से रोकते हैं।

— चक

के संभावित डुप्लिकेट मोबाइल सफारी में जोड़ने अक्षम फोन नंबर कैसे?

— ब्रायन रोजर्स

Answer 1

दो विकल्प…

1. format-detectionमेटा टैग सेट करें ।

टेलीफोन नंबरों के लिए सभी ऑटो-स्वरूपण को हटाने के लिए, इसे headअपने htmlदस्तावेज़ में जोड़ें:

<meta name="format-detection" content="telephone=no">

अधिक Apple-विशिष्ट मेटा टैग कुंजी देखें ।

नोट: यदि आपके पास इन नंबरों वाले पेज पर फोन नंबर हैं, तो आपको उन्हें मैन्युअल रूप से लिंक के रूप में प्रारूपित करना चाहिए:

<a href="tel:[phone]">1-555-555-5555</a>

---

2. मेटा टैग सेट नहीं किया जा सकता है? उपयोग करना चाहते हैं css?

दो cssविकल्प:

---

विकल्प 1 (वेब ​​पृष्ठों के लिए बेहतर)

इस सीएसएस विशेषता चयनकर्ता का उपयोग करके hrefशुरू होने वाले मूल्यों के साथ लक्ष्य लिंक tel:

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

---

विकल्प 2 (html ईमेल टेम्प्लेट के लिए बेहतर)

वैकल्पिक रूप से, आप तब कर सकते हैं जब आप मेटा टैग सेट नहीं कर सकते हैं - जैसे कि html ईमेल में- लिंक / एंकर टैग ( <a href=""></a>) में फोन नंबर लपेटें और फिर निम्नलिखित के समान सीएसएस का उपयोग करके उनकी शैलियों को लक्षित करें और उन विशिष्ट गुणों को समायोजित करें जिन्हें आपको रीसेट करने की आवश्यकता है। :

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

यदि आप विशिष्ट लिंक को लक्षित करना चाहते हैं, तो अपने लिंक पर कक्षाओं का उपयोग करें और फिर ऊपर के सीएसएस चयनकर्ता को अपडेट करें a[x-apple-data-detectors].class-name।

Comments

हाय ब्यूस्मिथ, आपके उत्तर के लिए धन्यवाद। अंत में अपने पहले समाधान का उपयोग करते हुए कुछ समय पहले समाप्त हुआ ... अगर समस्या का एक और समाधान है तो बस आश्चर्य।

— रेनो

@ ब्यू स्मिथ, जो मेरे लिए भी काम करता था, लेकिन iPod 1st Generation's Safari पर नहीं। क्या उस पुराने ब्राउज़र के लिए कोई विशिष्ट टैग है?

— लाडो लोमिडेज़

45 जवाब और अभी भी समाधान नहीं किया है? :)

— कलजी

यह उत्तर है। एक संपर्क पृष्ठ था कि नंबर iPads और iPhones पर दिखाई नहीं देंगे। यह किया चाल, धन्यवाद!

— tahdhaze09

आरई 'टेल:' लिंक मार्कअप फोन नंबरों का उपयोग करते हुए: यह भी एक विकल्प के रूप में माइक्रोफ़ॉर्मेट्स का उपयोग करने का सुझाव दिया गया है ( ux.stackexchange.com/a/21121/36009 )।

— डेविड कुक

Answer 2

डेविड थॉमस के पहले के सुझाव पर विस्तार से बताने के लिए:

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

इसे अपने सीएसएस में जोड़ने से फोन नंबर की कार्यक्षमता निकल जाती है लेकिन यह अंडरलाइन को स्ट्रिप करता है और उस रंग से मेल खाता है जो आप मूल रूप से इस्तेमाल कर रहे थे।

अजीब बात है कि मैं अपना जवाब पोस्ट कर सकता हूं लेकिन मैं किसी और के जवाब नहीं दे सकता हूं।

Comments

यह सबसे अच्छा समाधान है लेकिन यह ऐसा होना चाहिए जैसा कि मेरा मानना ​​है: एक [href ^ = "tel"] {color: inherit; text-decoration: कोई नहीं; } कम से कम मेरे लिए तो यही काम किया। आपको यहां बताए गए दोहरे उद्धरण ("") की आवश्यकता है: stackoverflow.com/questions/3859101/what-does-ahref-do-in-css

— Panagiotis Palladinos

मैंने उद्धरण जोड़े हैं। हालांकि यह बिना उद्धरणों का उपयोग किए काम कर सकता है सीएसएस चश्मा स्ट्रिंग्स के लिए उनकी आवश्यकता होती है। आभार पनियागोटिस ने माना।

— सिल्वरबैक

धन्यवाद! यह मुझे पागल कर रहा है। कार्यक्षमता को बनाए रखने के लिए सबसे अच्छा जवाब (और शायद मान्यता प्राप्त उत्तर होना चाहिए!)

— 9

Answer 3

यदि आप फोन-नंबर के फ़ंक्शन को बनाए रखना चाहते हैं , लेकिन प्रदर्शन उद्देश्यों के लिए केवल अंडरलाइन को हटा दें, तो आप लिंक को किसी भी अन्य के रूप में स्टाइल कर सकते हैं:

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

मैंने दस्तावेज़ीकरण नहीं देखा है जो सुझाव देता है कि एक वर्ग फोन नंबर लिंक पर लागू होता है, इसलिए आपको उन कक्षाओं / आईडी को जोड़ना होगा जिन्हें आप एक अलग शैली चाहते हैं।

वैकल्पिक रूप से आप लिंक का उपयोग करके स्टाइल कर सकते हैं:

a[href^=tel] { /* css */ }

जो iPhone द्वारा समझा जाता है, और किसी अन्य यूए द्वारा लागू किया जाएगा (अब तक मुझे पता है, शायद एंड्रॉइड, ब्लैकबेरी, आदि उपयोगकर्ता / देवता टिप्पणी कर सकते हैं)।

Comments

यह शायद उपयोग करने के लिए एक अच्छा विचार है a[href^=tel:]ताकि आप आकस्मिक रूप से telephone.htmlआदि से मेल न खाएं

— मैटियास वाडमैन

@MattiasWadman आपके सुझाव ने मेरे लिए क्रोम या मोबाइल सफारी में काम नहीं किया।

— cfx

Answer 4

यदि लोग Google पर यह प्रश्न पाते हैं, तो आपको केवल टेलीफ़ोन नंबर के साथ एक लिंक के रूप में व्यवहार करना होगा क्योंकि Apple स्वचालित रूप से इसे सेट कर देगा।

आपका HTML

<p id="phone-text">Call us on <strong>[phone]</strong></p>

आपका सी.एस.

#phone-text a{color:#fff; text-decoration:none;}

Comments

यह वही है जिसकी मैं तलाश कर रहा था, सभी शीर्ष टिप्पणियां स्पष्ट रूप से इसका उल्लेख करने में विफल हैं।

— n8win

Answer 5

चूँकि हम एक फोन-आइकन वाली साइट पर tel: लिंक का उपयोग करते हैं: इससे पहले कि यहां पोस्ट किए गए अधिकांश समाधान किसी अन्य समस्या का परिचय देते हैं।

मैंने मेटा-टैग का उपयोग किया:

<meta name="format-detection" content="telephone=no">

यह निर्दिष्ट करने वाले टेल के साथ संयुक्त है : लिंक साइट-वाइड जहां इसे लिंक किया जाना चाहिए!

सीएसएस का उपयोग करना वास्तव में एक विकल्प नहीं है क्योंकि यह प्रासंगिक टेली-लिंक को छुपाता है।

Comments

इसके लिए शुक्रिया! Cordova / Ionic पर काम करता है।

— 19

Answer 6

सरल चाल ने मेरे लिए काम किया, फोन नंबर के बीच में एक छिपी हुई वस्तु को जोड़ा।

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

यह आपको IOS के लिए फ़ोन नंबर रंग को ओवरराइड करने में मदद करेगा।

Comments

यह काम करता है, लेकिन लिंक कार्यक्षमता को तोड़ता है। चुटकी में चीजों की जरूरत के लिए (जैसे आज) यह ठीक है।

— कारोलस

आपके उदाहरण ने मेरे लिए काम नहीं किया, लेकिन शून्य-चौड़ाई वाले योजक & zwj; चाल चली।

— Der_Meister

Answer 7

एक पुराना प्रश्न लेकिन जैसा कि उपरोक्त उत्तर में से कोई भी मेरे लिए अच्छा नहीं था मैं पोस्ट करता हूं कि मैंने इसे कैसे हल किया

मेरे पास एक सूची में एक फ़ोन नंबर है:

<li class="phone_menu">[phone]</li>

सीएसएस:

.phone_menu{
  color:orange;
}

लेकिन iPad / iPhone पर यह काला था, इसलिए मैंने इसे css में जोड़ा:

.phone_menu a{
  color:orange;
}

Answer 8

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

Answer 9

इस विषय से ब्यू स्मिथ के अनुसार: मैं iPhone / iOS पर टेलीफोन नंबर की नीली स्टाइल कैसे निकालूं?

आपको अपने लिंक की href विशेषता में "tel:" लागू करना चाहिए:

<a href="tel:[phone]">555 123-1234</a>

यह किसी भी अतिरिक्त शैली और DOM को फ़ोन नंबर स्ट्रिंग को हटा देगा।

Answer 10

मैं बीच-बीच में जाता रहा हूं

1।

    <a href="tel:[phone]">

2।

    <meta name="format-detection" content="telephone=no">

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

इसलिए मैंने कोशिश की और कोशिश की और यह पता चला कि iPhone एक विशेष प्रकार के लिंक के रूप में फोन नंबर का इलाज करता है जिसे सीएसएस के साथ स्वरूपित किया जा सकता है। मैंने एक पता टैग में नंबर लपेटा (यह किसी अन्य HTML टैग के साथ काम करेगा, बस <a>टैग से बचने की कोशिश करें ) और इसे सीएसएस में स्टाइल किया

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

और यह काम किया - एक डेस्कटॉप ब्राउज़र में एक सादा पाठ दिखाया और एक सफारी मोबाइल में कॉल / कैंसल विंडो के साथ एक लिंक के रूप में दिखाया गया, जो टैब पर पॉप अप हो रहा था और बिना डिफ़ॉल्ट ब्लू कलर और अंडरलाइनिंग के था।

बस सीएसएस नियमों के साथ सावधानी से नंबर पर लागू करें, खासकर जब पैडिंग / मार्जिन का उपयोग करें।

Answer 11

का उपयोग करके स्वरूप का पता लगाने की जरूरत नहीं है <meta name="format-detection" content="telephone=no">। किसी भी टैग में फोन नंबर का उपयोग करने की कोशिश करें, बल्कि उसके बाद एंकर टैग और शैली के अनुसार।span { background:none !important; border:0; padding:0; }

Answer 12

<meta name="format-detection" content="telephone=no">। यह मेटाटैग iOS उपकरणों पर डिफ़ॉल्ट सफ़ारी ब्राउज़र में काम करता है और केवल उन टेलीफोन नंबरों के लिए काम करेगा जो किसी टेलिफ़ोन लिंक में लिपटे नहीं हैं

1-800-123-4567
<a href="tel:[phone]">1-800-123-4567</a>

पहली पंक्ति को एक लिंक के रूप में स्वरूपित नहीं किया जाएगा यदि आप मेटाटैग निर्दिष्ट करते हैं लेकिन दूसरी पंक्ति क्योंकि यह एक टेलीफोन लंगर में लिपटी है।

---

आप मेटाटैग को सभी के साथ जोड़ सकते हैं और इस तरह के मिश्रण का उपयोग कर सकते हैं

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

अपने टेलीफ़ोन नंबरों की इच्छित स्टाइल बनाए रखने के लिए, लेकिन आपको यह सुनिश्चित करना चाहिए कि आप उन्हें टेलीफ़ोन एंकर में लपेटें।

यदि आप अतिरिक्त सतर्क रहना चाहते हैं और एक टेलीफोन नंबर की घटना से बचाव करते हैं जो रैपिंग एंकर टैग के साथ ठीक से स्वरूपित नहीं है, तो आप DOM के माध्यम से ड्रिल कर सकते हैं और इस स्क्रिप्ट के साथ समायोजित कर सकते हैं। वांछित के रूप में प्रतिस्थापन पैटर्न को समायोजित करें।

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

या jQuery के बिना भी बेहतर है

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

Answer 13

यदि आप अपने पृष्ठ पर कोई भी टेलीफोन नंबर नहीं रखना चाहते हैं, तो <meta name="format-detection" content="telephone=no"> ठीक काम करेगा। लेकिन बयानबाजी में, अगर आप फोन और गैर-फोन नंबरों के मिश्रण का उपयोग करने का इरादा रखते हैं, तो क्या होगा?

मान लें कि आप अपने HTML में केवल हार्ड-कोडिंग नंबर हैं, "आपके अंकों के बीच में सामान डालें" हैक काम करेंगे। लेकिन वे डायनामिक पृष्ठों के लिए बहुत कम उपयोग करते हैं, जैसे कि एक क्वेरी से संख्यात्मक डेटा आउटपुट के लिए PHP का उपयोग करना।

एक उदाहरण के रूप में, मैं शहर की आबादी की एक सूची तैयार कर रहा था। कुछ आबादी काफी बड़ी थी, जिसके कारण मोबाइल सफारी उन्हें फोन नंबर लिंक में बदल गई। सौभाग्य से, मुझे बस इतना करना था number_format()कि "हजारों" कॉमा डालने के लिए सरणी आउटपुट के आसपास PHP का उपयोग करें:

<?php echo number_format($row["population"]) ?>

यह स्वरूपण मोबाइल सफारी को समझाने के लिए पर्याप्त था कि संख्या के लिए कुछ अधिक विशिष्ट उद्देश्य था, इसलिए इसने मेरे बड़े नंबरों को टेलीफ़ोन में डिफ़ॉल्ट रूप से प्रदर्शित नहीं किया। <a href="tel:[phone]">1-800-123-4567</a>संख्या के लिए एक उद्देश्य को निर्दिष्ट करने के लिए @davidcondrey का उपयोग करके सुझाव के लिए यह सच होगा ।

लब्बोलुआब यह है कि सफारी मोबाइल जाहिरा तौर पर शब्दार्थ पर ध्यान देता है। यह देखते हुए कि HTML5 सिमेंटिक मार्कअप के आसपास बनाया गया है, और सर्च इंजन सिमेंटिक मार्कअप पर भरोसा कर रहे हैं, मैं इसे जितना संभव हो उतना उपयोग करने का इरादा रखता हूं।

Answer 14

नंबर को एक <फ़ील्डसेट> में डालने से iOS किसी कारण से नंबर को लिंक में बदलने से रोकेगा। कुछ मामलों में यह सही समाधान हो सकता है। मैं लिंक को परिवर्तित करने में अक्षम कंबल की वकालत नहीं करता।

Answer 15

iOS फ़ोन नंबर को डिफॉल्ट (स्पष्ट कारणों के लिए) क्लिक करने योग्य बनाता है। बेशक, यह एक अतिरिक्त टैग जोड़ता है जो आपके स्टाइल को ओवरराइड कर रहा है यदि आपका फोन नंबर पहले से लिंक नहीं है।

इसे ठीक करने के लिए, इसे अपनी स्टाइलशीट में जोड़ने का प्रयास करें: a[href^=tel] { color: inherit; text-decoration: none; }

आपको अतिरिक्त मार्कअप को जोड़े बिना अपने फोन नंबरों को स्टाइल में रखना चाहिए।

Answer 16

डिजिट विभाजनों के बीच डैश के लिए ASCII वर्ण डालने का उपयोग करने का प्रयास करें।

इस से: -

इसके लिए: –

उदा: परिवर्तन 555-555-5555=>555–555–5555

Answer 17

यह मेरे लिए यह किया:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

आप अधिक जानकारी यहाँ पा सकते हैं ।

Answer 18

Joomla में Yootheme मेरे लिए काम करता है:

a:not([class]) {
    color: #fff !important;
}

Answer 19

यह एक्स-एमएस-फॉर्मेट-डिटेक्शन = "कोई नहीं" विशेषता प्रारूप फोन को संभालता है।

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>[phone]</strong></p>

Answer 20

यदि आप बस फोन नंबर से बचना चाहते हैं तो फॉन्ट टैग का उपयोग करके लिंक पर प्रयास करें:

<p>800<font>-</font>555<font>-<font>1212</p>