আমি কীভাবে আইফোন / আইওএস এ টেলিফোন নম্বরগুলির নীল স্টাইলিংটি সরিয়ে ফেলব?

Question

আইফোনে দেখার সময় কোনও টেলিফোন নম্বর থেকে ডিফল্ট নীল হাইপারলিংক রঙটি সরানোর কোনও উপায় আছে কি? একটি নির্দিষ্ট মোবাইল সাফারি ট্যাগ বা সিএসএস যুক্ত করতে চান?

আমার কাছে এটি কেবল সংখ্যার জন্য রয়েছে:

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

এবং কোনও হাইপারলিঙ্কস নেই তবে আইফোন এখনও এই পাঠ্য নম্বরটিকে হাইপারলিঙ্ক হিসাবে উপস্থাপন করে। আমার কয়েকটি ওয়েবসাইটে আমার এই রেন্ডারিং ইস্যু রয়েছে তবে কেন এটি ঘটছে তা দেখতে পাচ্ছি না।

আমি এই পোস্টটি পড়েছি:

মোবাইল এইচটিএমএল রেন্ডারিং নম্বর

তবে এটাই কি একমাত্র সমাধান সম্ভব?

Comments

এটি একই জিনিস কিনা পুরোপুরি নিশ্চিত নয়, আপনি কি দয়া করে পরীক্ষা করতে পারেন? stackoverflow.com/questions/3712475/…

— পেক্কা

@ পেপকা: আমি মনে করি এই প্রশ্নটি একই তবে স্বতন্ত্র। এটি ছিল কোনও কিছুকে ফোন নম্বর হিসাবে ভুল ব্যাখ্যা করা থেকে বিরত করা। এটি প্রকৃত ফোন নম্বরগুলি আপনার ডিজাইনের কৃপণতা থেকে রক্ষা করার বিষয়ে বলে মনে হচ্ছে।

— চক

মোবাইল সাফারিতে ফোন নম্বর লিঙ্কিং কীভাবে অক্ষম করবেন তার

— ব্রায়ান রজার্স

Answer 1

দুটি বিকল্প ...

1. format-detectionমেটা ট্যাগ সেট করুন ।

টেলিফোন নম্বরগুলির জন্য সমস্ত অটো-ফর্ম্যাটিং অপসারণ করতে head, আপনার htmlদস্তাবেজের মধ্যে এটি যুক্ত করুন:

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

আরও অ্যাপল-নির্দিষ্ট মেটা ট্যাগ কীগুলি দেখুন ।

দ্রষ্টব্য: এই নম্বরগুলির সাথে পৃষ্ঠাতে যদি আপনার ফোন নম্বর থাকে তবে আপনাকে সেগুলি লিঙ্ক হিসাবে ম্যানুয়ালি ফর্ম্যাট করা উচিত:

<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 (এইচটিএমএল ইমেল টেম্পলেটগুলির জন্য ভাল)

বিকল্পভাবে, আপনি যখন কোনও মেটা ট্যাগ সেট করতে না পারেন - যেমন এইচটিএমএল ইমেলের মতো link লিঙ্ক / অ্যাঙ্কর ট্যাগগুলিতে ফোন নম্বরগুলি মোড়ানো / <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

হাই বৌসমিথ, আপনার উত্তরের জন্য ধন্যবাদ। কিছুক্ষণ আগে শেষ পর্যন্ত আপনার প্রথম সমাধানটি ব্যবহার করে শেষ হয়েছিল ... সমস্যাটির আর কোনও সমাধান আছে কিনা তা ভেবে অবাক হলেন।

— রেনো

@ বিউ স্মিথ, এটি আমার পক্ষেও কাজ করেছিল তবে আইপড ১ ম জেনারেশনের সাফারিতে নয়। সেই পুরানো ব্রাউজারের জন্য কি কোনও নির্দিষ্ট ট্যাগ রয়েছে?

— লাডো লোমিডজে

45 উত্তর এবং এখনও সমাধান তৈরি করেন নি? :)

— kaleazy

এই উত্তর। একটি যোগাযোগ পৃষ্ঠা ছিল যা নম্বরগুলি আইপ্যাড এবং আইফোনে প্রদর্শিত হবে না। এই কৌশলটি করেছেন, আপনাকে ধন্যবাদ!

— tahdhaze09

আরআর 'টেল:' মার্কআপ ফোন নম্বরগুলির লিঙ্কগুলি ব্যবহার করছে: এটি বিকল্প হিসাবে ( ux.stackexchange.com/a/21121/36009 ) মাইক্রোফর্ম্যাটগুলি ব্যবহার করার পরামর্শও দেওয়া হয়েছে ।

— ডেভিড কুক

Answer 2

ডেভিড থমাসের পূর্ববর্তী পরামর্শটি বিশদভাবে বর্ণনা করার জন্য:

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

এটি আপনার সিএসএসে যুক্ত করা ফোন নম্বরটির কার্যকারিতা ছেড়ে দেয় তবে আন্ডারলাইনটি স্ট্রিপ করে এবং আপনি যে রঙটি ব্যবহার করছেন সেটি মেলে।

অদ্ভুত যে আমি আমার নিজের উত্তর পোস্ট করতে পারি তবে আমি অন্য কারও প্রতিক্রিয়া জানাতে পারি না ..

Comments

এটি সর্বোত্তম সমাধান তবে এটি আমার বিশ্বাসের মতো হওয়া উচিত: a [href ^ = "tel"] {রঙ: উত্তরাধিকার; টেক্সট প্রসাধন: কেউ না; Least কমপক্ষে আমার পক্ষে এটি কাজ করেছিল। এখানে উল্লিখিত হিসাবে আপনার ডাবল উদ্ধৃতি ("") দরকার: স্ট্যাকওভারফ্লো

— পানাগিওটিস প্যালাডিনোস

আমি উদ্ধৃতি যোগ করেছি। যদিও এটি সিএসএস স্পেসে কোটগুলি ব্যবহার না করেই কাজ করতে পারে তবে স্ট্রিংয়ের জন্য তাদের প্রয়োজন হয়। ধন্যবাদ Panagiotis।

— সিলভারব্যাক

ধন্যবাদ! এটি আমাকে পাগল করে চলেছে। কার্যকারিতাও বজায় রাখার জন্য সেরা উত্তর (এবং সম্ভবত স্বীকৃত উত্তর হওয়া উচিত!)

— রেজেক্সো

Answer 3

আপনি যদি ফোন নম্বরটির ক্রিয়াকলাপ ধরে রাখতে চান তবে কেবল প্রদর্শনের উদ্দেশ্যে আন্ডারলাইনটি সরিয়ে ফেলতে পারেন তবে আপনি লিঙ্কটিকে অন্য যেভাবে স্টাইল করতে পারেন:

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

আমি এমন ডকুমেন্টেশন দেখিনি যা ফোনের নম্বর লিঙ্কগুলিতে ক্লাস প্রয়োগ করার পরামর্শ দেয়, তাই আপনাকে আলাদা স্টাইল করতে চাইলে লিঙ্কগুলিতে ক্লাস / আইডি যুক্ত করতে হবে ।

বিকল্পভাবে আপনি লিঙ্কটি ব্যবহার করে স্টাইল করতে পারেন:

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

যা আইফোন দ্বারা বোঝা যায়, এবং প্রয়োগ করা হবে না (যতদূর আমি জানি, সম্ভবত অ্যান্ড্রয়েড, ব্ল্যাকবেরি, ইত্যাদি ব্যবহারকারী / দেবগণ মন্তব্য করতে পারে) অন্য কোনও সংযুক্ত আরব আমিরাতের দ্বারা।

Comments

এটা সম্ভবত একটি ভাল ধারণা ব্যবহার করবেন তা a[href^=tel:]আপনি ঘটনাক্রমে করার hrefs মিলছে না তাই telephone.htmlইত্যাদি

— Mattias Wadman

@ মাটিয়াসওয়াদম্যান আপনার পরামর্শটি ক্রোম বা মোবাইল সাফারিতে আমার পক্ষে কার্যকর হয়নি।

— সিএফএক্স

Answer 4

লোকেরা গুগলে এই প্রশ্নটি খুঁজে পেলে আপনার কেবলমাত্র টেলিফোন নম্বরটিকে লিঙ্ক হিসাবে বিবেচনা করা হবে কারণ অ্যাপল এটিকে স্বয়ংক্রিয়ভাবে একটি হিসাবে সেট করবে।

আপনার এইচটিএমএল

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

আপনার সিএসএস

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

Comments

এটিই আমি সন্ধান করছিলাম, শীর্ষস্থানীয় সমস্ত মন্তব্য এটির স্পষ্টভাবে উল্লেখ করতে ব্যর্থ।

— n8win

Answer 5

যেহেতু আমরা টেলিফোন ব্যবহার করি: ফোন-আইকনযুক্ত কোনও সাইটে লিঙ্কগুলি: এখানে পোস্ট করা বেশিরভাগ সমাধান আরও একটি সমস্যার পরিচয় দেওয়ার আগে।

আমি মেটা ট্যাগ ব্যবহার করেছি:

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

এটি নির্দিষ্ট করে টেলিফোনটির সাথে মিলিত : সাইট-প্রশস্ত লিঙ্কযুক্ত যেখানে এটি লিঙ্ক করা উচিত!

প্রাসঙ্গিক টেলি-লিঙ্কগুলি লুকিয়ে রাখার কারণে CSS ব্যবহার করা আসলেই কোনও বিকল্প নয়।

Comments

এই জন্য আপনাকে ধন্যবাদ! কর্ডোভা / আয়নিক উপর নিখুঁত কাজ করে।

— টেকনোটিম

Answer 6

সরল কৌশলটি আমার জন্য কাজ করেছিল, ফোন নম্বরটির মাঝখানে একটি লুকানো বস্তু যুক্ত করে।

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

এটি আপনাকে আইওএসের জন্য ফোন নম্বর রঙকে ওভাররাইড করতে সহায়তা করবে।

Comments

এটি কাজ করে তবে লিঙ্ক কার্যকারিতা ভঙ্গ করে। এক চিমটি জিনিস প্রয়োজন (আজকের মতো) এটি ঠিক আছে।

— করোলাস

আপনার উদাহরণটি আমার পক্ষে কার্যকর হয়নি, তবে শূন্য প্রস্থের জোড় & zwj; কৌতুকটি করেছেন

— ডের_মিস্টার

Answer 7

একটি পুরানো প্রশ্ন তবে উপরোক্ত উত্তরগুলির কোনওটিই আমার পক্ষে ভাল ছিল না আমি পোস্ট করেছিলাম কীভাবে এটি সমাধান করেছি

একটি তালিকায় আমার একটি ফোন নম্বর রয়েছে:

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

CSS:

.phone_menu{
  color:orange;
}

তবে আইপ্যাড / আইফোনে এটি কালো ছিল, তাই আমি এটি কেবল 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

এই বিষয়টি থেকে বিউ স্মিথের মতে: আমি কীভাবে আইফোন / আইওএস এ টেলিফোন নম্বরগুলির নীল স্টাইলিংটি সরিয়ে ফেলব?

আপনার লিঙ্কটির href বৈশিষ্ট্যে আপনার "টেল:" প্রয়োগ করা উচিত:

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

এটি ফোন নম্বর স্ট্রিংয়ের যেকোন সংযোজন স্টাইল এবং ডোম সরিয়ে ফেলবে।

Answer 10

আমি মাঝে মাঝে পিছনে যাচ্ছি

1।

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

2।

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

ডেস্কটপ এবং আইফোনের জন্য একই কোডটি কাজ করার চেষ্টা করছে। সমস্যাটি হ'ল যদি প্রথম বিকল্পটি ব্যবহার করা হয় এবং আপনি ডেস্কটপ ব্রাউজার থেকে এটি ক্লিক করেন এটি একটি ত্রুটি বার্তা দেয় এবং দ্বিতীয়টি ব্যবহৃত হয় এটি আইফোন আইওএস 5-এ ট্যাব-টু-কল কার্যকারিতা অক্ষম করে।

তাই আমি চেষ্টা করেছি এবং চেষ্টা করেছি এবং প্রমাণিত হয়েছে যে আইফোন ফোন নম্বরটিকে একটি বিশেষ ধরণের লিঙ্ক হিসাবে বিবেচনা করে যা সিএসএসের সাথে এক হিসাবে ফর্ম্যাট করা যায়। আমি একটি ঠিকানা ট্যাগে নম্বরটি গুটিয়ে রেখেছি (এটি অন্য কোনও এইচটিএমএল ট্যাগের সাথে কাজ করবে, কেবল <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">। এই মেটাটাগ আইওএস ডিভাইসে ডিফল্ট সাফারি ব্রাউজারে কাজ করে এবং কেবলমাত্র টেলিফোন নম্বরগুলির জন্য কাজ করবে যেগুলি টেলিফোনে লিঙ্কে মোড়ানো নয় তাই

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;
}

আপনার টেলিফোন নম্বরগুলির উদ্দেশ্যে স্টাইলিং বজায় রাখতে, তবে আপনার অবশ্যই এটি অবশ্যই একটি টেলিফোনের অ্যাঙ্কারে মুড়ে রাখতে হবে।

আপনি যদি অতিরিক্ত সতর্ক হন এবং কোনও টেলিফোনের নম্বর থেকে রক্ষা করতে চান যা কোনও মোড়ক অ্যাঙ্কর ট্যাগ দিয়ে সঠিকভাবে ফর্ম্যাটেড না হয় তবে আপনি ডওমের মাধ্যমে ড্রিল করতে পারেন এবং এই স্ক্রিপ্টটি সামঞ্জস্য করতে পারেন। পছন্দসই প্রতিস্থাপন প্যাটার্ন সামঞ্জস্য করুন।

$('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"> ঠিকঠাক কাজ করবে। তবে কথায় কথায় বলতে গেলে, আপনি যদি ফোন এবং নন-ফোন নম্বরগুলির মিশ্রণটি ব্যবহার করতে চান?

আপনার এইচটিএমএলে আপনি কেবল হার্ড কোডিং নম্বরগুলি ধরে নিয়েছেন, "আপনার অঙ্কগুলির মাঝখানে জিনিসগুলি সন্নিবেশ করুন" হ্যাকগুলি কাজ করবে। তবে ডায়নামিক পৃষ্ঠাগুলির জন্য এগুলির তেমন কোনও ব্যবহার হয় না যেমন পিএইচপি ব্যবহার করে কোয়েরি থেকে সংখ্যার ডেটা আউটপুট দেয়।

উদাহরণ হিসাবে, আমি শহর জনসংখ্যার একটি তালিকা তৈরি করছিলাম। মোবাইল সাফারিটিকে ফোন নম্বর লিঙ্কগুলিতে পরিণত করার জন্য কিছু জনসংখ্যা যথেষ্ট বড় ছিল। ভাগ্যক্রমে, আমাকে যা করতে হয়েছিল তা হ'ল number_format()"হাজার" কমা toোকাতে অ্যারে আউটপুটের চারপাশে পিএইচপি ব্যবহার করা হয়েছিল :

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

এই ফর্ম্যাটিংটি মোবাইল সাফারিকে বোঝানোর জন্য যথেষ্ট ছিল যে এই সংখ্যার জন্য কিছুটা সুনির্দিষ্ট উদ্দেশ্য রয়েছে, তাই এটি আমার বৃহত্তর সংখ্যাগুলিকে আর টেলিফোনে লিঙ্কে ডিফল্ট করে না। @ ডেভিডকন্ড্রে সংখ্যায় <a href="tel:[phone]">1-800-123-4567</a>একটি উদ্দেশ্য নির্দিষ্ট করে ব্যবহার করার পরামর্শটি একই হিসাবে গ্রহণ করবে ।

নীচের লাইনটি হল সাফারি মোবাইল দৃশ্যত শব্দার্থবিজ্ঞানের দিকে মনোযোগ দেয়। এইচটিএমএল 5 অর্থাতৃত মার্কআপের চারপাশে নির্মিত এবং সার্চ ইঞ্জিনগুলি সিনেটিক মার্কআপের উপর নির্ভর করছে বলে প্রদত্ত যে, আমি এটি যথাসাধ্য ব্যবহার করার ইচ্ছা করি।

Answer 14

<ফিল্ডসেট> এ নম্বরটি স্থাপন করা আইওএসকে কোনও কারণে সংখ্যাকে কোনও লিঙ্কে রূপান্তর করা থেকে আটকাবে। কিছু ক্ষেত্রে এটি সঠিক সমাধান হতে পারে। আমি লিঙ্কগুলিতে রূপান্তর করার একটি কম্বল অক্ষম করার পক্ষে সমর্থন করি না।

Answer 15

ডিওএল্টস (স্পষ্ট কারণে) আইওএস ফোন নম্বরগুলি ক্লিকযোগ্য করে তোলে। অবশ্যই, এটি একটি অতিরিক্ত ট্যাগ যুক্ত করে যা আপনার স্টাইলিংকে ওভাররাইড করছে যদি আপনার ফোন নম্বর ইতিমধ্যে কোনও লিঙ্ক না থাকে।

এটি ঠিক করতে, আপনার স্টাইলশীটে এটি যুক্ত করার চেষ্টা করুন: 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

জুমলাতে ইয়ুথেম আমার জন্য কাজ করে:

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>