আমি আমার অ্যাপ্লিকেশনটির জন্য "ল্যান্ডস্কেপ" মোডটিকে জোর করার চেষ্টা করছি কারণ আমার অ্যাপ্লিকেশনটি একেবারে "প্রতিকৃতি" মোডের জন্য ডিজাইন করা হয়নি। আমি এটা কিভাবে করবো?
আমি আমার অ্যাপ্লিকেশনটির জন্য "ল্যান্ডস্কেপ" মোডটিকে জোর করার চেষ্টা করছি কারণ আমার অ্যাপ্লিকেশনটি একেবারে "প্রতিকৃতি" মোডের জন্য ডিজাইন করা হয়নি। আমি এটা কিভাবে করবো?
উত্তর:
HTML5 ওয়েব অ্যাপ্লিকেশন দ্বারা এটি এখন সম্ভব। নিচে দেখ.
আসল উত্তর:
আপনি কোনও নির্দিষ্ট অরিয়েন্টেশনে কোনও ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন লক করতে পারবেন না। এটি ডিভাইসের প্রাকৃতিক আচরণের বিরুদ্ধে যায়।
আপনি এই জাতীয় CSS3 মিডিয়া ক্যোয়ারীর সাহায্যে ডিভাইস ওরিয়েন্টেশন সনাক্ত করতে পারেন :
@media screen and (orientation:portrait) {
// CSS applied when the device is in portrait mode
}
@media screen and (orientation:landscape) {
// CSS applied when the device is in landscape mode
}
বা জাভাস্ক্রিপ্ট ওরিয়েন্টেশন পরিবর্তন ইভেন্টটিকে এইভাবে আবদ্ধ করে:
document.addEventListener("orientationchange", function(event){
switch(window.orientation)
{
case -90: case 90:
/* Device is in landscape mode */
break;
default:
/* Device is in portrait mode */
}
});
12 নভেম্বর, 2014-এ আপডেট করুন: এটি এখন HTML5 ওয়েব অ্যাপ্লিকেশন দ্বারা সম্ভব।
এইচটিএমএল 5 আরকস.কম- তে ব্যাখ্যা করা অনুসারে আপনি এখন কোনও manifest.jsonফাইল ব্যবহার করে ওরিয়েন্টেশন মোডকে জোর করতে পারেন ।
আপনাকে সেই লাইনটি জসন ফাইলে অন্তর্ভুক্ত করতে হবে:
{
"display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
"orientation": "landscape", /* Could be "landscape" or "portrait" */
...
}
এবং আপনাকে আপনার এইচটিএমএল ফাইলটিতে ম্যানিফেস্টটি অন্তর্ভুক্ত করতে হবে:
<link rel="manifest" href="manifest.json">
লকিং ওরিয়েন্টেশন মোডের জন্য ওয়েব অ্যাপ্লিকেশনটিতে সমর্থনটি কী তা নিশ্চিত তা নিশ্চিত নয়, তবে ক্রোম অবশ্যই সেখানে রয়েছে। আমার কাছে তথ্য থাকলে আপডেট হবে।
screen.orientation.lock('landscape');
এটিকে পরিবর্তন করতে এবং ল্যান্ডস্কেপ মোডে থাকতে বাধ্য করবে। নেক্সাস 5 এ পরীক্ষিত।
আমি এর মতো কিছু সিএসএস ব্যবহার করি ( সিএসএস কৌশলগুলির উপর ভিত্তি করে ):
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
landscapeকরা portraitএবং এটি প্রত্যাশার মতো কাজ করে@media screen and (orientation: portrait)
portrait(যাতে এটি স্যুইচ করতে পারে landscape)।
আমার একই সমস্যা ছিল, এটি একটি অনুপস্থিত ম্যানিফেস্ট.জসন ফাইল ছিল, যদি আপনি ফাইলটি নির্দিষ্ট না করেন বা কোনও ভুল পথ ব্যবহার না করেন তবে ব্রাউজারটি ওরিয়েন্টেশনের সাথে সিদ্ধান্ত নেওয়া সবচেয়ে উপযুক্ত।
আমি ঠিক এইচটিএমএল শিরোলেখগুলিতে ম্যানিফেস্ট.জসনকে সঠিকভাবে কল করা ঠিক করেছি।
আমার এইচটিএমএল শিরোনাম:
<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">
এবং manifest.json ফাইল সামগ্রী:
{
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
}
আপনার ফেভিকন এবং আইকনগুলি তৈরি করতে এই ওয়েব টোলটি ব্যবহার করুন: https://realfavicongenerator.net/
আপনার ম্যানিফেস্ট ফাইল ব্যবহার করতে: https://tomitm.github.io/appmanifest/
আমার পিডব্লিউএ দুর্দান্ত কাজ করে, আশা করি এটি সাহায্য করবে!