এটি পূর্ববর্তী উত্তরে প্রসারিত হয়। আমি খুঁজে পেয়েছি সেরা সমাধানটি একটি নির্দোষ সিএসএস অ্যাট্রিবিউট তৈরি করা যা কেবলমাত্র সিএসএস 3 মিডিয়া ক্যোয়ারী পূরণ করা হলে উপস্থিত হয় এবং তারপরে সেই বৈশিষ্ট্যের জন্য জেএস পরীক্ষা করা হয়।
উদাহরণস্বরূপ, সিএসএসে আপনি যা চাইবেন:
@media screen only and (orientation:landscape)
{
// Some innocuous rule here
body
{
background-color: #fffffe;
}
}
@media screen only and (orientation:portrait)
{
// Some innocuous rule here
body
{
background-color: #fffeff;
}
}
তারপরে আপনি জাভাস্ক্রিপ্টে যান (আমি ফানসিগুলির জন্য jQuery ব্যবহার করছি)। রঙের ঘোষণাগুলি অদ্ভুত হতে পারে, তাই আপনি অন্য কিছু ব্যবহার করতে চাইতে পারেন, তবে এটি পরীক্ষার জন্য এটিই আমি সবচেয়ে বোকামি পদ্ধতি। তারপরে আপনি স্যুইচিংয়ে উঠতে পুনরায় আকারের ইভেন্টটি ব্যবহার করতে পারেন। এটি একসাথে রাখুন:
function detectOrientation(){
// Referencing the CSS rules here.
// Change your attributes and values to match what you have set up.
var bodyColor = $("body").css("background-color");
if (bodyColor == "#fffffe") {
return "landscape";
} else
if (bodyColor == "#fffeff") {
return "portrait";
}
}
$(document).ready(function(){
var orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
$(document).resize(function(){
orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
});
});
এর সর্বোত্তম অংশটি হ'ল আমার এই উত্তরটি লেখার সাথে সাথে ডেস্কটপ ইন্টারফেসগুলিতে এটির কোনও প্রভাব আছে বলে মনে হয় না, যেহেতু তারা (সাধারণত) পৃষ্ঠায় ওরিয়েন্টেশন দেওয়ার পক্ষে কোনও যুক্তি দেয় না বলে মনে হয়।