JavaScript screen.orientation – বাংলা টিউটোরিয়াল
screen.orientation হলো JavaScript এর একটি প্রপার্টি যেটা দিয়ে আপনি ইউজারের স্ক্রিনের অরিয়েন্টেশন বা ঘূর্ণন অবস্থান (Portrait/ Landscape) জানতে পারেন। এটি সাধারণত মোবাইল ডিভাইসে বা responsive ওয়েব ডিজাইনে ব্যবহৃত হয়।
কী কী জানতে পারবেন?
- স্ক্রিনটি Portrait না Landscape
- অরিয়েন্টেশন এর টাইপ (e.g., “portrait-primary”)
- অরিয়েন্টেশন পরিবর্তন হলে callback ফায়ার করা
Basic Example:
আপনার স্ক্রিনের Orientation তথ্য এখানে দেখানো হবে
<script>
function showOrientation() {
if (screen.orientation) {
let info = “Type: ” + screen.orientation.type + “<br>” +
“Angle: ” + screen.orientation.angle + “°”;
document.getElementById(“orientationInfo”).innerHTML = info;
} else {
document.getElementById(“orientationInfo”).innerHTML = “⚠️ Orientation API সমর্থিত নয়।”;
}
}
</script>
function showOrientation() {
if (screen.orientation) {
let info = “Type: ” + screen.orientation.type + “<br>” +
“Angle: ” + screen.orientation.angle + “°”;
document.getElementById(“orientationInfo”).innerHTML = info;
} else {
document.getElementById(“orientationInfo”).innerHTML = “⚠️ Orientation API সমর্থিত নয়।”;
}
}
</script>
Orientation Change Detection:
<script>
if (screen.orientation) {
screen.orientation.addEventListener(“change”, () => {
alert(” Orientation পরিবর্তন হয়েছে: ” + screen.orientation.type);
});
}
</script>
if (screen.orientation) {
screen.orientation.addEventListener(“change”, () => {
alert(” Orientation পরিবর্তন হয়েছে: ” + screen.orientation.type);
});
}
</script>
Orientation টাইপসমূহ
| Type | Meaning |
|---|---|
| portrait-primary | ডিভাইস সাধারণভাবে উলম্ব অবস্থায় |
| portrait-secondary | উল্টো উলম্ব (reverse portrait) |
| landscape-primary | প্রাকৃতিক অনুভূমিক অবস্থান |
| landscape-secondary | উল্টো অনুভূমিক (reverse landscape) |
মনে রাখবেন:
screen.orientationসমর্থিত সব ব্রাউজারে কাজ নাও করতে পারে (বিশেষ করে পুরোনো বা ডেস্কটপ ব্রাউজারে)।- এটি সবচেয়ে বেশি কার্যকর মোবাইল ডিভাইসে।
- অনেক ওয়েব অ্যাপ্স orientation change অনুযায়ী layout পরিবর্তন করে।