ব্ৰাউজাৰ আৰু ডিভাইচসমূহ
ব্ৰাউজাৰ আৰু ডিভাইচসমূহৰ বিষয়ে শিকিব, আধুনিকৰ পৰা পুৰণিলৈকে, যি Bootstrap দ্বাৰা সমৰ্থিত, প্ৰতিটোৰ বাবে জনা quirks আৰু বাগসমূহ অন্তৰ্ভুক্ত কৰি।
বুটষ্ট্ৰেপে সকলো প্ৰধান ব্ৰাউজাৰ আৰু প্লেটফৰ্মৰ শেহতীয়া, সুস্থিৰ উন্মোচনসমূহ সমৰ্থন কৰে । উইণ্ড'জত আমি ইণ্টাৰনেট এক্সপ্ল'ৰাৰ ১০-১১ / মাইক্ৰ'ছফ্ট এজ সমৰ্থন কৰোঁ ।
বিকল্প ব্ৰাউজাৰসমূহ যি WebKit, Blink, বা Gecko ৰ শেহতীয়া সংস্কৰণ ব্যৱহাৰ কৰে, সেয়া প্ৰত্যক্ষভাৱে হওক বা প্লেটফৰ্মৰ ৱেব দৰ্শন API ৰ যোগেদি হওক, স্পষ্টভাৱে সমৰ্থিত নহয়। কিন্তু, বুটষ্ট্ৰেপে (বেছিভাগ ক্ষেত্ৰতে) এই ব্ৰাউজাৰসমূহতো সঠিকভাৱে প্ৰদৰ্শন আৰু কাম কৰিব লাগে। অধিক নিৰ্দিষ্ট সমৰ্থন তথ্য তলত দিয়া হৈছে।
আপুনি আমাৰ সমৰ্থিত ব্ৰাউজাৰসমূহৰ পৰিসৰ আৰু ইয়াৰ সংস্কৰণসমূহ আমাৰpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
আমি CSS উপসৰ্গসমূহৰ জৰিয়তে উদ্দেশ্যপ্ৰণোদিত ব্ৰাউজাৰ সমৰ্থন নিয়ন্ত্ৰণ কৰিবলৈ Autoprefixer ব্যৱহাৰ কৰো, যিয়ে এই ব্ৰাউজাৰ সংস্কৰণসমূহ পৰিচালনা কৰিবলৈ Browserslist ব্যৱহাৰ কৰে। এই সঁজুলিসমূহ আপোনাৰ প্ৰকল্পসমূহত কেনেকৈ সংহতি কৰিব লাগে তাৰ বাবে তেওঁলোকৰ আলেখ্যন চাওক।
সাধাৰণতে ক'বলৈ গ'লে, Bootstrap এ প্ৰতিটো প্ৰধান প্লেটফৰ্মৰ অবিকল্পিত ব্ৰাউজাৰসমূহৰ শেহতীয়া সংস্কৰণসমূহ সমৰ্থন কৰে। মন কৰিব যে প্ৰক্সি ব্ৰাউজাৰসমূহ (যেনে Opera Mini, Opera Mobile ৰ Turbo মোড, UC ব্ৰাউজাৰ মিনি, Amazon Silk) সমৰ্থিত নহয়।
| Chrome | ফায়াৰফক্স | ছাফাৰী | এণ্ড্ৰইড ব্ৰাউজাৰ আৰু ৱেবভিউ | মাইক্ৰ'ছফ্ট এজ | |
|---|---|---|---|---|---|
| এণ্ড্ৰইড | সমৰ্থিত | সমৰ্থিত | N/A | Android v5.0+ সমৰ্থিত | সমৰ্থিত |
| iOS | সমৰ্থিত | সমৰ্থিত | সমৰ্থিত | N/A | সমৰ্থিত |
| উইণ্ড’জ ১০ মোবাইল | N/A | N/A | N/A | N/A | সমৰ্থিত |
একেদৰে, বেছিভাগ ডেস্কটপ ব্ৰাউজাৰৰ শেহতীয়া সংস্কৰণ সমৰ্থিত।
| Chrome | ফায়াৰফক্স | ইণ্টাৰনেট এক্সপ্ল’ৰাৰ | মাইক্ৰ'ছফ্ট এজ | অপেৰা | ছাফাৰী | |
|---|---|---|---|---|---|---|
| মেক্ | সমৰ্থিত | সমৰ্থিত | N/A | N/A | সমৰ্থিত | সমৰ্থিত |
| উইণ্ড’জ | সমৰ্থিত | সমৰ্থিত | সমৰ্থিত, IE10+ | সমৰ্থিত | সমৰ্থিত | সমৰ্থিত নহয় |
Firefox ৰ বাবে, শেহতীয়া সাধাৰণ সুস্থিৰ উন্মোচনৰ উপৰিও, আমি Firefox ৰ শেহতীয়া সম্প্ৰসাৰিত সমৰ্থন উন্মোচন (ESR) সংস্কৰণো সমৰ্থন কৰোঁ।
বেচৰকাৰীভাৱে, বুটষ্ট্ৰেপে লিনাক্সৰ বাবে Chromium আৰু Chrome, Linux ৰ বাবে Firefox, আৰু Internet Explorer 9 ত যথেষ্ট ভাল দেখা আৰু আচৰণ কৰিব লাগে, যদিও সিহত আনুষ্ঠানিকভাৱে সমৰ্থিত নহয় ।
বুটষ্ট্ৰেপে গ্ৰেপল কৰিবলগীয়া কিছুমান ব্ৰাউজাৰ বাগসমূহৰ এটা তালিকাৰ বাবে, আমাৰ ব্ৰাউজাৰ বাগসমূহৰ দেৱাল চাওক ।
Internet Explorer 10+ সমৰ্থিত; IE9 আৰু ডাউন নহয়। অনুগ্ৰহ কৰি সচেতন হওক যে কিছুমান CSS3 বৈশিষ্ট্য আৰু HTML5 উপাদানসমূহ IE10 ত সম্পূৰ্ণৰূপে সমৰ্থিত নহয়, বা সম্পূৰ্ণ কাৰ্য্যকৰীতাৰ বাবে উপসৰ্গযুক্ত বৈশিষ্ট্যসমূহৰ প্ৰয়োজন। CSS3 আৰু HTML5 বৈশিষ্ট্যসমূহৰ ব্ৰাউজাৰ সমৰ্থনৰ বিষয়ে বিৱৰণৰ বাবে মই ব্যৱহাৰ কৰিব পাৰোনে... চাওক ।
যদি আপুনি IE8-9 সমৰ্থনৰ প্ৰয়োজন, Bootstrap 3 ব্যৱহাৰ কৰক । ই আমাৰ ক'ডৰ আটাইতকৈ সুস্থিৰ সংস্কৰণ আৰু এতিয়াও আমাৰ দলৰ দ্বাৰা জটিল বাগফিক্স আৰু আলেখ্যন পৰিবৰ্তনৰ বাবে সমৰ্থিত। অৱশ্যে ইয়াত কোনো নতুন বৈশিষ্ট্য সংযোজন কৰা নহ’ব।
overflow: hidden;iOS আৰু Android ত on the element ৰ বাবে সমৰ্থন <body>যথেষ্ট সীমিত। সেই উদ্দেশ্যে, যেতিয়া আপুনি সেই ডিভাইচসমূহৰ যিকোনো এটা ব্ৰাউজাৰত এটা মডালৰ ওপৰ বা তলৰ ফালে স্ক্ৰল কৰে, <body>বিষয়বস্তু স্ক্ৰল হ'বলৈ আৰম্ভ কৰিব। Chrome বাগ #175502 ( Chrome v40 ত সমাধান কৰা হৈছে) আৰু WebKit বাগ #153852 চাওক ।
iOS 9.2 ৰ পৰা, এটা মডাল খোলা থকাৰ সময়ত, যদি এটা স্ক্ৰল ইংগিতৰ প্ৰাৰম্ভিক স্পৰ্শ এটা পাঠ্য <input>বা a ৰ সীমাৰ ভিতৰত থাকে <textarea>, <body>মডালৰ তলৰ বিষয়বস্তু মডালৰ পৰিৱৰ্তে স্ক্ৰল কৰা হ'ব। ৱেবকিট বাগ #153856 চাওক ।
z-indexing ৰ জটিলতাৰ বাবে nav ত iOS ত .dropdown-backdropউপাদানটো ব্যৱহাৰ কৰা নহয়। এইদৰে, navbars ত ড্ৰপডাউনসমূহ বন্ধ কৰিবলে, আপুনি প্ৰত্যক্ষভাৱে ড্ৰপডাউন উপাদান (বা অন্য যিকোনো উপাদান যি iOS ত এটা ক্লিক ইভেন্ট গুলিয়াব ) ক্লিক কৰিব লাগিব।
পৃষ্ঠা জুমিঙে অনিবাৰ্যভাৱে কিছুমান উপাদানত ৰেণ্ডাৰ আৰ্টিফেক্টসমূহ উপস্থাপন কৰে, বুটষ্ট্ৰেপ আৰু বাকী ৱেব দুয়োটাতে। সমস্যাটোৰ ওপৰত নিৰ্ভৰ কৰি আমি হয়তো ইয়াক সমাধান কৰিব পাৰিম (প্ৰথমে সন্ধান কৰক আৰু তাৰ পিছত প্ৰয়োজন হ’লে এটা সমস্যা খুলিব)। কিন্তু আমি এইবোৰক আওকাণ কৰাৰ প্ৰৱণতা ৰাখোঁ কাৰণ ইয়াৰ প্ৰায়ে হেকি ৱৰ্কআৰউণ্ডৰ বাহিৰে আন কোনো প্ৰত্যক্ষ সমাধান নাথাকে।
যদিও :hoverবেছিভাগ টাচ ডিভাইচত সম্ভৱ নহয়, iOS এ এই আচৰণ অনুকৰণ কৰে, যাৰ ফলত “আঠাযুক্ত” হোভাৰ শৈলীসমূহ হয় যি এটা উপাদান টেপ কৰাৰ পিছতো স্থায়ী হয়। এই হোভাৰ শৈলীসমূহ কেৱল আঁতৰোৱা হয় যেতিয়া ব্যৱহাৰকাৰীসকলে অন্য উপাদান টেপ কৰে। এই আচৰণক বহুলাংশে অবাঞ্চিত বুলি গণ্য কৰা হয় আৰু এণ্ড্ৰইড বা উইণ্ড’জ ডিভাইচত ই কোনো সমস্যা নহয় যেন লাগে।
আমাৰ v4 আলফা আৰু বিটা উন্মোচনসমূহৰ ভিতৰত, আমি এটা মিডিয়া প্ৰশ্ন শ্বিমত বিকল্প কৰাৰ বাবে অসম্পূৰ্ণ আৰু মন্তব্য কৰা ক'ড অন্তৰ্ভুক্ত কৰিলোঁ যিয়ে হোভাৰিং অনুকৰণ কৰা টাচ ডিভাইচ ব্ৰাউজাৰসমূহত হোভাৰ শৈলীসমূহ নিষ্ক্ৰিয় কৰিব। এই কাম কেতিয়াও সম্পূৰ্ণৰূপে সম্পূৰ্ণ বা সামৰ্থবান কৰা হোৱা নাছিল, কিন্তু সম্পূৰ্ণ ভাঙি যোৱাৰ পৰা হাত সাৰিবলৈ, আমি এই শিমটোক অগ্ৰাহ্য কৰিবলৈ বাছি লৈছো আৰু মিক্সিনসমূহক ছ্যুডো-ক্লাছসমূহৰ বাবে চৰ্টকাট হিচাপে ৰাখিছো।
আনকি কিছুমান আধুনিক ব্ৰাউজাৰতো প্ৰিন্টিং কুটিল হ’ব পাৰে।
Safari v8.0 ৰ পৰা, স্থিৰ-প্ৰস্থ .containerশ্ৰেণীৰ ব্যৱহাৰে Safari এ প্ৰিন্ট কৰাৰ সময়ত এটা অস্বাভাৱিকভাৱে সৰু ফন্ট আকাৰ ব্যৱহাৰ কৰিবলৈ বাধ্য কৰিব পাৰে। অধিক বিৱৰণৰ বাবে সমস্যা #14868 আৰু WebKit বাগ #138192 চাওক। এটা সম্ভাৱ্য সমাধান হ'ল নিম্নলিখিত CSS:
@media print {
.container {
width: auto;
}
}বাকচৰ বাহিৰত, এণ্ড্ৰইড ৪.১ (আৰু আনকি কিছুমান নতুন মুক্তিও আপাত দৃষ্টিত) ব্ৰাউজাৰ এপৰ সৈতে পছন্দৰ ডিফল্ট ৱেব ব্ৰাউজাৰ হিচাপে প্ৰেৰণ কৰা হয় (ক্ৰ’মৰ বিপৰীতে)। দুৰ্ভাগ্যজনকভাৱে, ব্ৰাউজাৰ এপটোত সাধাৰণতে CSS ৰ সৈতে বহুতো বাগ আৰু অসামঞ্জস্যতা আছে।
উপাদানসমূহত , <select>Android ষ্টক ব্ৰাউজাৰে পাৰ্শ্ব নিয়ন্ত্ৰণসমূহ প্ৰদৰ্শন নকৰে যদি এটা border-radiusআৰু/বা borderপ্ৰয়োগ কৰা হৈছে। ( বিস্তাৰিত বিৱৰণৰ বাবে এই StackOverflow প্ৰশ্ন চাওক ।) আপত্তিজনক CSS আঁতৰাবলৈ তলৰ ক'ডৰ স্নিপেট ব্যৱহাৰ কৰক আৰু <select>Android ষ্টক ব্ৰাউজাৰত এটা অষ্টাইল কৰা উপাদান হিচাপে ৰেণ্ডাৰ কৰক। ব্যৱহাৰকাৰী এজেন্ট স্নিফিঙে Chrome, Safari, আৰু Mozilla ব্ৰাউজাৰসমূহৰ সৈতে হস্তক্ষেপ এৰাই চলিব।
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>এটা উদাহৰণ চাব বিচাৰেনে? এই JS Bin ডেমো চাওক।
পুৰণি আৰু বাগী ব্ৰাউজাৰসমূহক সম্ভৱপৰ উত্তম অভিজ্ঞতা প্ৰদান কৰিবলৈ, বুটষ্ট্ৰেপে ব্ৰাউজাৰসমূহত নিজেই বাগসমূহৰ সমাধান কৰিবলৈ কিছুমান ব্ৰাউজাৰ সংস্কৰণসমূহলৈ বিশেষ CSS লক্ষ্য কৰি কেইবাটাও ঠাইত CSS ব্ৰাউজাৰ হেক ব্যৱহাৰ কৰে। এই হেকসমূহে বুজিব পৰা যায় যে CSS বৈধকৰণকাৰীসকলে অভিযোগ কৰে যে সেইবোৰ অবৈধ। দুটামান ঠাইত, আমি ব্লিডিং-এজ CSS বৈশিষ্ট্যসমূহো ব্যৱহাৰ কৰো যিবোৰ এতিয়াও সম্পূৰ্ণৰূপে প্ৰামাণিক কৰা হোৱা নাই, কিন্তু এইবোৰ কেৱল প্ৰগতিশীল বৃদ্ধিৰ বাবে ব্যৱহাৰ কৰা হয়।
এই বৈধকৰণ সতৰ্কবাণীসমূহে কাৰ্যক্ষেত্ৰত কোনো গুৰুত্ব নিদিয়ে কাৰণ আমাৰ CSS ৰ নন-হেকী অংশটোৱে সম্পূৰ্ণৰূপে বৈধতা প্ৰদান কৰে আৰু হেকি অংশসমূহে নন-হেকী অংশটোৰ সঠিক কাৰ্য্যকলাপত হস্তক্ষেপ নকৰে, সেয়েহে আমি ইচ্ছাকৃতভাৱে এই বিশেষ সতৰ্কবাণীসমূহক কিয় আওকাণ কৰো।
আমাৰ HTML নথিপত্ৰসমূহত একেদৰেই কিছুমান তুচ্ছ আৰু অপ্ৰয়োজনীয় HTML বৈধকৰণ সতৰ্কবাণী আছে কাৰণ আমাৰ এটা নিৰ্দিষ্ট Firefox বাগৰ বাবে এটা ৱৰ্কআৰউণ্ড অন্তৰ্ভুক্ত কৰা হৈছে ।