সিএসএস মিডিয়া ক্যোয়ারী ব্যবহার করে ডিভাইস ওরিয়েন্টেশন কীভাবে সনাক্ত করবেন?

Question

জাভাস্ক্রিপ্টে ওরিয়েন্টেশন মোডটি ব্যবহার করে সনাক্ত করা যায়:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

তবে, কেবল সিএসএস ব্যবহার করে ওরিয়েন্টেশন সনাক্ত করার কোনও উপায় আছে কি?

যেমন। কিছুটা এইরকম:

@media only screen and (width > height) { ... }

Answer 1

স্ক্রিন ওরিয়েন্টেশন সনাক্ত করতে সিএসএস:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

মিডিয়া ক্যোয়ারির সিএসএস সংজ্ঞাটি http://www.w3.org/TR/css3-mediaqueries/#orientation এ রয়েছে

Comments

দ্রষ্টব্য: এই মানটি প্রকৃত ডিভাইস অরিয়েন্টেশন সম্পর্কিত নয়। প্রতিকৃতি ওরিয়েন্টেশনের বেশিরভাগ ডিভাইসে সফট কীবোর্ড খোলার ফলে ভিউপোর্টটি লম্বা হওয়ার চেয়ে আরও প্রশস্ত হয়ে যাবে, যার ফলে ব্রাউজারটি প্রতিকৃতির পরিবর্তে ল্যান্ডস্কেপ শৈলী ব্যবহার করবে।

— জোহান কমব্রিংক

@ জোহানকমব্রিংক সত্যই গুরুত্বপূর্ণ আপনি এটি উল্লেখ করেছেন। কীবোর্ডটি খোলার সাথে সাথে নকশায় গোলযোগ হবে। ভাল আপনি এই নির্দেশ।

— lowtechsun

: এর জন্য @ JohannCombrink এর মন্তব্য রেফারেন্স stackoverflow.com/q/8883163/363448

— ndequeker

কীবোর্ড পপআপ করা হলে আলাদা স্টাইল প্রয়োগ করা খারাপ জিনিস নাও কারণ দৃশ্যমান অঞ্চলটি সাধারণত ল্যান্ডস্কেপ মোডে প্রযোজ্য শৈলীর জন্য বেশি ফিট থাকে। তাই বামার নাও হতে পারে।

— মুহাম্মদ বিন ইউসরাত

আমি মুহাম্মদের ভাষণটি পছন্দ করি: যদি কোনও সফ্টওয়্যার কীবোর্ড ভিউপোর্টকে প্রশস্তের চেয়ে কম করে দেয় তবে ভিউপোর্টটি ল্যান্ডস্কেপ অভিযোজন হতে পারে (এমনকি আপনি যদি শারীরিক ডিভাইসটি সাধারণভাবে ধারণ করেন তবে)। সিএসএস আমার মতামত অনুসারে কাজ করছে।

— বেনি

Answer 2

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

তবে এখনও মনে হচ্ছে আপনাকে পরীক্ষা করতে হবে

Comments

ওরিয়েন্টেশন ডিভাইসের উপর নির্ভর করে। কিছু ট্যাবলেট ল্যান্ডস্কেপ মোডে থাকার সময় ওরিয়েন্টেশন = 0 প্রতিবেদন করে। আইফোনগুলি স্যামসুং গ্যালাক্সিজ থেকে পৃথকভাবে প্রতিবেদন করে।

— ব্ল্যাকম্যাগিক

Answer 3

আমি মনে করি আমাদের আরও নির্দিষ্ট মিডিয়া ক্যোয়ারী লিখতে হবে। নিশ্চিত করুন যে আপনি যদি একটি মিডিয়া ক্যোয়ারী লিখেন তবে এটি অন্য দর্শনে (মোব, ট্যাব, ডেস্ক) প্রভাবিত হওয়া উচিত নয় অন্যথায় এটি সমস্যা হতে পারে। আমি সংশ্লিষ্ট ডিভাইসের জন্য একটি বেসিক মিডিয়া ক্যোয়ারী লিখতে পরামর্শ দিতে চাই যা উভয় দৃষ্টিভঙ্গি এবং একটি ওরিয়েন্টেশন মিডিয়া ক্যোয়ারিকে কভার করে যে আপনি ওরিয়েন্টেশন সম্পর্কে আরও নির্দিষ্ট কোডটি ভাল অভ্যাসের জন্য দেখতে পারেন। আমাদের একই সাথে উভয় মিডিয়া ওরিয়েন্টেশন কোয়েরি লেখার দরকার নেই। আপনি আমার নীচের উদাহরণ উল্লেখ করতে পারেন। আমার ইংরেজি লেখার খুব ভাল না হলে আমি দুঃখিত। উদা:

মোবাইলের জন্য

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

ট্যাবলেট জন্য

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

ডেস্কটপ

আপনার নকশা প্রয়োজনীয়তা অনুযায়ী উপভোগ করুন ... (:

ধন্যবাদ, জিতু

Answer 4

আমি দিক-অনুপাতের জন্য যাব, এটি আরও সম্ভাবনার উপায় দেয়।

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

উভয় দিকনির্দেশ এবং দিক-অনুপাত ভিউপোর্টের প্রকৃত আকারের উপর নির্ভর করে এবং ডিভাইস অভিযোজনে নিজেই কিছুই করতে পারে না।

আরও পড়ুন: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

Answer 5

জাভাস্ক্রিপ্টে এটি ব্যবহার করা ভাল screen.widthএবং screen.height। এই দুটি মান সমস্ত আধুনিক ব্রাউজারে উপলব্ধ। এগুলি স্ক্রিনের আসল মাত্রা দেয় এমনকি অ্যাপ্লিকেশন শুরু হওয়ার পরে ব্রাউজারটি ছোট করে দেওয়া হয়। window.innerWidthব্রাউজারটি ছোট হয়ে গেলে পরিবর্তিত হয় যা মোবাইল ডিভাইসে ঘটতে পারে না তবে পিসি এবং ল্যাপটপে ঘটতে পারে।

যখন মোবাইল ডিভাইস প্রতিকৃতি এবং ল্যান্ডস্কেপ মোডের মধ্যে ফ্লপ হয় তখন এর মানগুলি screen.widthএবং screen.heightপরিবর্তিত হয়, সুতরাং মানগুলির সাথে তুলনা করে মোডটি নির্ধারণ করা সম্ভব। যদি screen.width1280px এর চেয়ে বেশি হয় আপনি পিসি বা ল্যাপটপ নিয়ে ডিল করছেন।

দুটি মান ফ্লিপ করা হয় তা সনাক্ত করতে আপনি জাভাস্ক্রিপ্টে ইভেন্ট শ্রোতাদের তৈরি করতে পারেন। মনোনিবেশ করার জন্য পোর্ট্রেট স্ক্রিন.উইথের মানগুলি হ'ল 320 পিক্স (প্রধানত আইফোন), 360 পিক্স (বেশিরভাগ ফোন), 768 পিক্স (ছোট ট্যাবলেট) এবং 800 পিক্স (নিয়মিত ট্যাবলেট)।

Comments

এটি লক্ষণীয় গুরুত্বপূর্ণ যে আইফোনটি ঘোরানোর সময় আইওএসগুলি screen.widthএবং screen.heightমানগুলি উল্টায় না। এটি সর্বদা একই মানগুলির প্রতিবেদন করে। আপনি ব্যবহার করতে হবে window.orientationকিনা তা নির্ধারণ করতে ডিভাইস আবর্তিত হয়েছে সম্পত্তি ... (মান 90 বা -90 আড়াআড়ি মোডে জন্য হতে হবে।)

— interDist