@ สื่อความกว้างขั้นต่ำและความกว้างสูงสุด

225

ฉันมีการ@mediaตั้งค่านี้:

HTML :

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

CSS :

@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 */
}

ด้วยการตั้งค่านี้มันทำงานบน iPhone แต่มันไม่ทำงานในเบราว์เซอร์

เป็นเพราะฉันมีอยู่แล้วdeviceในเมตาและอาจมีmax-width:480pxแทน

css mobile media-queries

— rallybilen
แหล่งที่มา

1

ปัญหาของอะไร - สไตล์เริ่มต้นจะสามารถใช้ได้กับหน้าจอที่กว้างกว่า 769 พิกเซล

— Gurpreet Singh

เพียงลบ@media screen and (min-width:769px){สไตล์เบราว์เซอร์ปกติของคุณออกไป

— Zoltan Toth

คุณหมายถึงอะไร Zoltan? และฉันคิดว่าฉันอาจแก้ไขได้ ก่อนอื่นปัญหาคือเมื่อฉันปรับขนาดเบราว์เซอร์ด้วย max-device- กับมันทำงานบนโทรศัพท์ แต่ไม่ได้อยู่ใน broswer โดยไม่ต้อง "อุปกรณ์" มันทำงานได้ทั้ง

— rallybilen

ดังนั้นพื้นฐานโดยไม่ต้อง "อุปกรณ์" มันทำงานได้ทั้งในมือถือ / เบราว์เซอร์ แต่เมื่อฉันเพิ่มอุปกรณ์ฉันไม่สามารถเห็นมันในเบราว์เซอร์ \

— rallybilen

1

มันควรจะเป็น980pxไม่ได้เพราะปลายขนาดเบราว์เซอร์ที่960 980px

339

ฉันพบวิธีที่ดีที่สุดคือการเขียน CSS เริ่มต้นของคุณสำหรับเบราว์เซอร์รุ่นเก่าเนื่องจากเบราว์เซอร์รุ่นเก่ารวมถึง 5.5, 6, 7 และ 8 ไม่สามารถอ่าน @media เมื่อฉันใช้ @ สื่อฉันใช้มันเช่นนี้:

<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 นี่เป็นเพียงตัวอย่างของสิ่งที่ฉันพบว่าดีที่สุดสำหรับฉันเมื่อสร้างสไตล์สำหรับเบราว์เซอร์ทั้งหมด

ข้อกำหนดของ iPad CSS

นอกจากนี้ยัง! หากคุณกำลังมองหาความสามารถในการพิมพ์ที่คุณสามารถใช้ได้@media print{}

— bashleigh
แหล่งที่มา

16

ทำไมคุณถึงใส่หน้าจอ 'mac' ไม่เพียง แต่เป็น Mac ที่ "น่าทึ่ง" ที่สามารถมีหน้าจอความละเอียดสูงขนาดใหญ่ได้!

— ลุค

38

ปัญหาพื้นฐานคือการใช้max-device-widthVS 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 //

    }

สำหรับ iPad และ iPad pro คุณต้องใช้

    @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 //

    }

หากคุณต้องการเพิ่ม css สำหรับโหมดแนวนอนคุณสามารถเพิ่มสิ่งนี้ได้

และ (ปฐมนิเทศ: ภูมิประเทศ)

  @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 //

        }

— Rohit Kaushik
แหล่งที่มา

8

ค่าที่ถูกต้องสำหรับcontentแอตทริบิวต์ควรรวมinitial-scaleแทน:

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

ขยายตัวอย่างข้อมูล

— Ksenia Titova
แหล่งที่มา

2

หากคุณสามารถอธิบายได้ว่าทำไมและเพิ่มการอ้างอิงนั่นจะทำให้คำตอบนี้มีประโยชน์มากขึ้น

— Michael Benjamin

2

@Michael_B เริ่มต้นคือ 'user-scalable = no' ที่บอกว่ามันทั้งหมดที่ฉันคิด

— Apolo Radomer

0

สำหรับ iPhone คุณต้องใส่วิวพอร์ตของคุณแบบนี้

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

— NuggaN85
แหล่งที่มา