আমি জানি যে একটি আইফোনের সাফারিতে আপনি onorientationchangeইভেন্টটি শুনে এবং window.orientationকোণটি অনুসন্ধান করে স্ক্রিনের ওরিয়েন্টেশন এবং ওরিয়েন্টেশন পরিবর্তনটি সনাক্ত করতে পারেন ।
অ্যান্ড্রয়েড ফোনগুলির ব্রাউজারে এটি কি সম্ভব?
স্পষ্টতই, আমি জিজ্ঞাসা করছি যে কোনও অ্যান্ড্রয়েড ডিভাইসের ঘূর্ণন কোনও মানক ওয়েব পৃষ্ঠায় চলমান জাভাস্ক্রিপ্ট দ্বারা সনাক্ত করা যায় কিনা । এটি একটি আইফোনে সম্ভব, এবং আমি ভেবেছিলাম যে এটি অ্যান্ড্রয়েড ফোনগুলির জন্য করা যেতে পারে।
উত্তর:
অ্যান্ড্রয়েড ব্রাউজারে ওরিয়েন্টেশন পরিবর্তন সনাক্ত করতে, শ্রোতার সাথে orientationchangeবা resizeইভেন্টটির সাথে সংযুক্ত করুন window:
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);window.orientationডিভাইসটি কীভাবে ওরিয়েন্টেড তা নির্ধারণের জন্য সম্পত্তিটি পরীক্ষা করুন । অ্যান্ড্রয়েড ফোনগুলির সাথে screen.widthবা screen.heightডিভাইসটি ঘোরানোর সাথে সাথে আপডেটও হয়। (আইফোনের ক্ষেত্রে এটি হয় না)।
বিভিন্ন ডিভাইস জুড়ে আসল আচরণটি বেমানান । আকার পরিবর্তন এবং ওরিয়েন্টেশন পরিবর্তন ইভেন্টগুলি বিভিন্ন ফ্রিকোয়েন্সি সহ একটি পৃথক ক্রমগুলিতে আগুন দিতে পারে। এছাড়াও, কিছু মান (যেমন: স্ক্রিন.উইথ এবং উইন্ডো.ওরিয়েন্টেশন) আপনার প্রত্যাশার সাথে সর্বদা পরিবর্তন হয় না। স্ক্রিন.উইথথ এড়িয়ে চলুন - আইওএসে ঘোরার সময় এটি পরিবর্তন হয় না।
নির্ভরযোগ্য পদ্ধতি হ'ল পুনরায় আকার এবং ওরিয়েন্টেশন পরিবর্তনের ইভেন্টগুলি (একটি সুরক্ষার জন্য কিছু পোলিং সহ) শোনার জন্য এবং অবশেষে আপনি ওরিয়েন্টেশনের জন্য একটি বৈধ মান পাবেন। আমার পরীক্ষায়, অ্যান্ড্রয়েড ডিভাইসগুলি মাঝে মাঝে পুরো 180 ডিগ্রি ঘোরার সময় ইভেন্টগুলিতে ফায়ার করতে ব্যর্থ হয়, তাই আমি ওরিয়েন্টেশনটি পোল করার জন্য একটি সেটআইন্টারওয়ালও অন্তর্ভুক্ত করেছি।
var previousOrientation = window.orientation;
var checkOrientation = function(){
if(window.orientation !== previousOrientation){
previousOrientation = window.orientation;
// orientation changed, do your magic here
}
};
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);আমি যে চারটি ডিভাইসটি পরীক্ষা করেছি তার ফলাফল এখানে রয়েছে (এএসসিআইআই টেবিলের জন্য দুঃখিত, তবে ফলাফলগুলি উপস্থাপনের সবচেয়ে সহজ উপায় বলে মনে হয়েছিল)। আইওএস ডিভাইসের মধ্যে ধারাবাহিকতা বাদ দিয়ে ডিভাইসগুলিতে প্রচুর বৈচিত্র্য রয়েছে। দ্রষ্টব্য: ইভেন্টগুলি তারা গুলি চালানোর ক্রমে তালিকাবদ্ধ রয়েছে।
| ================================================= ============================= | | ডিভাইস | ঘটনাবলী আগুন | ওরিয়েন্টেশন | ইনারউইথ | screen.width | | ================================================= ============================= | | আইপ্যাড 2 | আকার পরিবর্তন | 0 | 1024 | 768 | | (ল্যান্ডস্কেপ) | ওরিয়েন্টেশন পরিবর্তন | 90 | 1024 | 768 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | আইপ্যাড 2 | আকার পরিবর্তন | 90 | 768 | 768 | | (প্রতিকৃতিতে) | ওরিয়েন্টেশন পরিবর্তন | 0 | 768 | 768 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | আইফোন 4 | আকার পরিবর্তন | 0 | 480 | 320 | | (ল্যান্ডস্কেপ) | ওরিয়েন্টেশন পরিবর্তন | 90 | 480 | 320 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | আইফোন 4 | আকার পরিবর্তন | 90 | 320 | 320 | | (প্রতিকৃতিতে) | ওরিয়েন্টেশন পরিবর্তন | 0 | 320 | 320 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | ড্রয়েড ফোন | ওরিয়েন্টেশন পরিবর্তন | 90 | 320 | 320 | | (ল্যান্ডস্কেপ) | আকার পরিবর্তন | 90 | 569 | 569 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | ড্রয়েড ফোন | ওরিয়েন্টেশন পরিবর্তন | 0 | 569 | 569 | | (প্রতিকৃতিতে) | আকার পরিবর্তন | 0 | 320 | 320 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | স্যামসাং গ্যালাক্সি | ওরিয়েন্টেশন পরিবর্তন | 0 | 400 | 400 | | ট্যাবলেট | ওরিয়েন্টেশন পরিবর্তন | 90 | 400 | 400 | | (ল্যান্ডস্কেপ) | ওরিয়েন্টেশন পরিবর্তন | 90 | 400 | 400 | | | আকার পরিবর্তন | 90 | 683 | 683 | | | ওরিয়েন্টেশন পরিবর্তন | 90 | 683 | 683 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- | | স্যামসাং গ্যালাক্সি | ওরিয়েন্টেশন পরিবর্তন | 90 | 683 | 683 | | ট্যাবলেট | ওরিয়েন্টেশন পরিবর্তন | 0 | 683 | 683 | | (প্রতিকৃতিতে) | ওরিয়েন্টেশন পরিবর্তন | 0 | 683 | 683 | | | আকার পরিবর্তন | 0 | 400 | 400 | | | ওরিয়েন্টেশন পরিবর্তন | 0 | 400 | 400 | | ---------------- + + ------------------- + + ------------ - + + ------------ + + -------------- |
previousOrientationতত্কালীন অভিমুখীকরণের সাথে শুরু করা উচিত: var previousOrientation = window.orientation;আপনি যদি 180-ডিগ্রি ঘূর্ণন অগ্রাহ্য করতে চান, তবে আপনাকে বাম বা ডান ল্যান্ডস্কেপ এবং উল্টে-ডাউন-বা-নয় রূপগুলির মধ্যে পার্থক্য করার প্রয়োজন নেই, নিম্নলিখিতটি যুক্ত করুন প্রথম লাইন হিসেবে checkOrientation(): if (0 === (previousOrientation + window.orientation) % 180) return;যাইহোক, অতিরিক্ত ছাড়া setTimeoutকপট, আপনি শুধুমাত্র এই থেকে আইওএস, যেখানে একটা দ্রুতগতি 180-ডিগ্রী ঘূর্ণন শুধুমাত্র একটি সৃষ্টি উপর উপকৃত হবে একক orientationchange ইভেন্ট।
দ্বি-বিট-বোকা-এর দুর্দান্ত উত্তরটি সমস্ত পটভূমি সরবরাহ করে তবে আমি কীভাবে আইওএস এবং অ্যান্ড্রয়েড জুড়ে ওরিয়েন্টেশন পরিবর্তনগুলি পরিচালনা করতে পারি তার একটি সংক্ষিপ্ত, বাস্তবিক সংক্ষিপ্তসার চেষ্টা করি :
resizeঘটনা শুধুমাত্র।window.innerWidthএবং window.InnerHeightশুধুমাত্র কাজ করুন ।window.orientation- এটি আইওএস-এ বর্তমান হবে না। resize Android এর উপর ইভেন্ট, এবং শুধুমাত্রorientationchange iOS এ ইভেন্ট।window.orientation(এবং window.innerWidthএবং window.InnerHeight) এ কাজ করুনএই পদ্ধতিগুলি পূর্ববর্তী ওরিয়েন্টেশনটি মনে করে তুলনা করার তুলনায় সামান্য সুবিধা দেয়:
window.orientationডেস্কটপ ব্রাউজারগুলিতে উপলব্ধ নয়)।আপনি সর্বদা উইন্ডো পুনরায় আকারের ইভেন্টটি শুনতে পেতেন। যদি সেই ইভেন্টে উইন্ডোটি লম্বা (বা বিপরীতভাবে) এর চেয়ে প্রশস্ত থেকে প্রশস্ত থেকে লম্বা হতে থাকে তবে আপনি নিশ্চিত হতে পারেন যে ফোনের ওরিয়েন্টেশনটি কেবল পরিবর্তিত হয়েছিল।
এটি HTML5 এ সম্ভব।
আপনি এখানে আরও পড়তে পারেন (এবং একটি লাইভ ডেমো চেষ্টা করে দেখুন): http://slides.html5rocks.com/# স্লাইড-ওরিয়েন্টেশন ।
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);এটি ডেস্কটপ ব্রাউজারগুলিকে সমর্থন করে তবে এটি সর্বদা একই মান প্রদান করবে return
আমারও একই সমস্যা ছিল। আমি অ্যাড্রয়েড ডিভাইসের জন্য ফোনগ্যাপ এবং জ্যাকুরি মোবাইল ব্যবহার করছি। সঠিকভাবে আকার পরিবর্তন করতে আমাকে একটি সময়সীমা নির্ধারণ করতে হয়েছিল:
$(window).bind('orientationchange',function(e) {
fixOrientation();
});
$(window).bind('resize',function(e) {
fixOrientation();
});
function fixOrientation() {
setTimeout(function() {
var windowWidth = window.innerWidth;
$('div[data-role="page"]').width(windowWidth);
$('div[data-role="header"]').width(windowWidth);
$('div[data-role="content"]').width(windowWidth-30);
$('div[data-role="footer"]').width(windowWidth);
},500);
}সমাধান এখানে:
var isMobile = {
Android: function() {
return /Android/i.test(navigator.userAgent);
},
iOS: function() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
};
if(isMobile.Android())
{
var previousWidth=$(window).width();
$(window).on({
resize: function(e) {
var YourFunction=(function(){
var screenWidth=$(window).width();
if(previousWidth!=screenWidth)
{
previousWidth=screenWidth;
alert("oreientation changed");
}
})();
}
});
}
else//mainly for ios
{
$(window).on({
orientationchange: function(e) {
alert("orientation changed");
}
});
}আরেকটি গোছা - কিছু অ্যান্ড্রয়েড ট্যাবলেট (আমি বিশ্বাস করি যে মটোরোলা জুম এবং একটি নিম্ন-প্রান্তের এলোনেক্স যার উপর আমি কিছু পরীক্ষা নিরীক্ষা করছি, সম্ভবত অন্যরাও) তাদের অ্যাকসিলোমিটারগুলি সেট আপ করেছে যাতে উইন্ডোটিরিয়েন্টেশন == 0 ল্যান্ডস্কেপ মোডে রয়েছে, প্রতিকৃতি নয় !
আপনি সমাধানটি চেষ্টা করতে পারেন, সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।
নিম্নলিখিতটি orientationchangeসামঞ্জস্যতা পিক:
সুতরাং, আমি একটি orientaionchangeপলিফিল লেখি, এটি ওরিয়েন্টেশন বিনিময় ইউটিলিটি লাইব্রেরি -ওরিয়েন্টেশন এক্সচেঞ্জ-ফিক্সের জন্য @ মিডিয়া অ্যাট্রিবিউটের উপর ভিত্তি করে
window.addEventListener('orientationchange', function(){
if(window.neworientation.current === 'portrait|landscape'){
// do something……
} else {
// do something……
}
}, false);জাভাস্ক্রিপ্ট অ্যান্ড্রয়েড কলগুলির কোনও কাজ করার আগে আমাকে ওয়েবক্রোমক্লিয়েন্ট ব্যবহার করতে আমার এপিক 4 জি টাচ-তে ওয়েলভিউ সেটআপ করতে হয়েছিল তা উল্লেখযোগ্য।
webView.setWebChromeClient(new WebChromeClient());দু-বিট-বোকা জবাবের জন্য একটু অবদান:
ড্রয়েড ফোনের টেবিলে বর্ণিত হিসাবে "ওরিয়েন্টেশন এক্সচেঞ্জ" ইভেন্টটি "পুনরায় আকার দিন" ইভেন্টের আগে বরখাস্ত হয়ে যায় ফলে এভাবে পরবর্তী পুনরায় আকার কলটি ব্লক করা হয় (যদি বিবৃতিটির কারণে)। প্রস্থ সম্পত্তি এখনও সেট করা নেই।
একটি কার্যনির্বাহী যদিও "নিখুঁত পরিবর্তন" ইভেন্টটি চালিত করা নিখুঁত নয়। এটি "যদি" বিবৃতিতে আবদ্ধ "ওরিয়েন্টেশন পরিবর্তন" মোড়ের মাধ্যমে সংরক্ষণাগারভুক্ত করা যেতে পারে:
if (!navigator.userAgent.match(/android/i))
{
window.addEventListener("orientationchange", checkOrientation, false);
}আশা করি এটা সাহায্য করবে
(পরীক্ষাটি নেক্সাস এস-তে করা হয়েছিল)