@ মিডিয়া মিনিম প্রস্থ এবং সর্বোচ্চ-প্রস্থ

225

আমার এই @mediaসেটআপটি রয়েছে:

এইচটিএমএল :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

সিএসএস :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

এই সেটআপটি দিয়ে এটি আইফোনে কাজ করে তবে এটি ব্রাউজারে কাজ করে না।

আমার ইতিমধ্যে deviceমেটা আছে বলে এবং সম্ভবত এর max-width:480pxপরিবর্তে পেয়েছি কারণ এটি ?

css mobile media-queries

— rallybilen
সূত্র

1

সমস্যাটি কী - ডিফল্ট শৈলীগুলি 769 পিক্সেলের চেয়েও বড় স্ক্রিনগুলিতে প্রযোজ্য।

— গুরপ্রীত সিং

কেবলমাত্র @media screen and (min-width:769px){আপনার সাধারণ ব্রাউজার শৈলীর চারপাশে সরিয়ে দিন

— জোল্টন টথ

জোলটান মানে কি? এবং আমি মনে করি আমি এটি সমাধান করতে পারি। প্রথমত, সমস্যাটি তখন ছিল যখন আমি আমার ব্রাউজারটিকে সর্বোচ্চ-ডিভাইস দিয়ে পুনরায় আকার দিয়েছিলাম - এটি ফোনে কাজ করেছিল তবে ব্রোজারে নয়, "ডিভাইস" ছাড়াই এটি উভয় ক্ষেত্রেই কাজ করে।

— র‌্যালীবিলেন

তাই মূলত "ডিভাইস" ব্যবহার করে এটি মোবাইল / ব্রাউজার উভয় ক্ষেত্রেই কাজ করে তবে আমি যখন ডিভাইস যুক্ত করি তখন আমি এটি ব্রাউজারে দেখতে পাই না \

— সমাবেশ বিলেন

1

ব্রাউজারের আকার শেষ হওয়ার কারণে এটি হওয়া উচিত 980pxনয় । 960980px

339

আমি খুঁজে পেয়েছি সেরা পদ্ধতিটি হ'ল পুরানো ব্রাউজারগুলির জন্য আপনার ডিফল্ট সিএসএস লিখুন, যেমন 5.5, 6, 7 এবং 8 সহ পুরানো ব্রাউজারগুলি @ আমি যখন @ মিডিয়া ব্যবহার করি তখন আমি এটি এ জাতীয় ব্যবহার করি:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

তবে আপনি আপনার @ মিডিয়াতে যা খুশি তা করতে পারেন, এটি সমস্ত ব্রাউজারের জন্য শৈলী তৈরি করার সময় আমার জন্য সবচেয়ে ভাল যেটি খুঁজে পেয়েছিল তার উদাহরণ।

আইপ্যাড সিএসএস স্পেসিফিকেশন।

এছাড়াও! আপনি মুদ্রণযোগ্যতার সন্ধান করলে আপনি ব্যবহার করতে পারেন@media print{}

— bashleigh
সূত্র

16

আপনি কেন 'ম্যাক' পর্দা রেখেছেন? এটি কেবলমাত্র "আশ্চর্যজনক" ম্যাকগুলিই নয় যেগুলিতে উচ্চতর রেজোলিউশনের স্ক্রিন থাকতে পারে!

— লুক

38

অন্তর্নিহিত সমস্যাটি max-device-widthবনাম সরল পুরানো ব্যবহার করছে max-width।

"ডিভাইস" কীওয়ার্ড ব্যবহার করে ব্রাউজার উইন্ডোটির প্রস্থ নয়, পর্দার দৈহিক মাত্রা লক্ষ্য করে।

উদাহরণ স্বরূপ:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

বনাম

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

— jpostdesign
সূত্র

11

যদি ছোট ডিভাইসগুলির ওয়েবসাইট যদি ডেস্কটপ স্ক্রিনের মতো আচরণ করে তবে আপনাকে আগে এই মেটা ট্যাগটি হেডারে রাখতে হবে

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

মিডিয়া প্রশ্নের জন্য আপনি এটি সেট করতে পারেন

এটি আপনার সমস্ত মোবাইল / সেলফোন প্রস্থকে কভার করবে

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

আইপ্যাড এবং আইপ্যাড প্রো জন্য আপনার ব্যবহার করতে হবে

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

আপনি যদি ল্যান্ডস্কেপ মোডের জন্য সিএসএস যুক্ত করতে চান তবে আপনি এটি যুক্ত করতে পারেন

এবং (ওরিয়েন্টেশন: ল্যান্ডস্কেপ)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— রোহিত কৌশিক
সূত্র

8

contentবৈশিষ্ট্যের জন্য সঠিক মান initial-scaleপরিবর্তে অন্তর্ভুক্ত করা উচিত :

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

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

— কেসনিয়া টিটোভা
সূত্র

2

আপনি যদি ব্যাখ্যা করতে পারেন এবং উল্লেখগুলি যুক্ত করতে পারেন তবে এটি উত্তরটিকে আরও কার্যকর করে তুলবে।

— মাইকেল বেঞ্জামিন

2

@ মিশেল_বি প্রাথমিকটি ছিল 'ব্যবহারকারী-পরিমাপযোগ্য = না'। এটাই আমার মনে হয়।

— অ্যাপোলো রেডোমার

0

কিছু আইফোনের জন্য আপনাকে নিজের ভিউপোর্টটি এভাবে রাখতে হবে

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
সূত্র