Chrome ডিভাইস মোড এমুলেশন মিডিয়া ক্যোয়ারী কাজ করছে না

Question 1

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

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

Question 2

আমি আমার পৃষ্ঠায় একটি মেটা ট্যাগ যুক্ত করে এই সমস্যাটি সমাধান করেছি:

 <meta name="viewport" content="width=device-width">

আপডেট (ডিসেম্বর 2019):

দেখে মনে হচ্ছে আপনার প্রাথমিক স্কেল এবং সর্বনিম্ন স্কেলও সেট করার দরকার হতে পারে:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Question 3

গৃহীত উত্তরটি আমার পক্ষে তা করেনি, আমাকেও যুক্ত করতে হয়েছিল minimum-scale=1।

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Question 4

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

Question 5

আমার জন্য কাজ কর.

আপনার পৃষ্ঠার শিরোনামে কেবল একটি ভিউপোর্ট মেটা ট্যাগ রেখে দিন। উদাহরণ দেখুন:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Question 6

আপনার কোডটিতে এই মেটা ট্যাগটি অন্তর্ভুক্ত করুন:

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

স্নিপেট প্রসারিত করুন

Question 7

যতক্ষণ না আমি লক্ষ্য করেছি যে একই ধরণের সমস্যা রইল যদি পর্দার আকারের উপর নির্ভর করে আমার যদি নিয়মের একই সেটের জন্য একাধিক বাস্তবায়ন হয়:

একই মিডিয়া ক্যোয়ারির জন্য সর্বনিম্ন এবং সর্বাধিক প্রস্থ উভয়ই নির্দিষ্ট করুন যাতে এটি পরবর্তী কোনওটির দ্বারা ওভাররাইট না হয়:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

বা সকলের জন্য কমপক্ষে একটি ব্রেকপয়েন্ট নির্ধারণ করুন:

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}