อะไรคือความแตกต่างระหว่าง "หน้าจอ" และ "หน้าจอเดียว" ในการค้นหาสื่อ

อะไรคือความแตกต่างระหว่างscreenและonly screenในการสืบค้นสื่อ?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

ทำไมเราต้องใช้only screen? ไม่screenตัวเองไม่ได้ให้ข้อมูลเพียงพอที่จะแสดงผลเฉพาะสำหรับหน้าจอ?

ฉันเคยเห็นเว็บไซต์ตอบสนองจำนวนมากใช้วิธีใดวิธีหนึ่งในสามวิธีต่อไปนี้:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

ลองแยกตัวอย่างของคุณทีละตัว

@media (max-width:632px)

หน้าต่างนี้กำลังพูดถึงหน้าต่างที่มีขนาดmax-width632px ซึ่งคุณต้องการใช้สไตล์เหล่านี้ ในขนาดนั้นคุณจะพูดถึงอะไรที่เล็กกว่าหน้าจอเดสก์ท็อปในกรณีส่วนใหญ่

@media screen and (max-width:632px)

อันนี้บอกว่าสำหรับอุปกรณ์ที่มี a screenและหน้าต่างที่มีmax-widthขนาด 632px ใช้สไตล์นี้ นี่คือเกือบจะเหมือนกับข้างต้นยกเว้นคุณจะระบุscreenเมื่อเทียบกับสื่อประเภทอื่น ๆ มากที่สุดทั่วไปอื่น ๆ printหนึ่งเป็น

@media only screen and (max-width:632px)

นี่เป็นคำพูดที่ส่งตรงจาก W3C เพื่ออธิบายอันนี้

คำหลัก 'เท่านั้น' ยังสามารถใช้เพื่อซ่อนสไตล์ชีทจากตัวแทนผู้ใช้เก่า ตัวแทนผู้ใช้จะต้องดำเนินการสอบถามสื่อที่เริ่มต้นด้วย 'เท่านั้น' ราวกับว่าคำหลัก 'เท่านั้น' ไม่ได้อยู่

เนื่องจากไม่มีประเภทสื่อเป็น "เท่านั้น" สไตล์ชีตควรถูกละเว้นโดยเบราว์เซอร์รุ่นเก่า

นี่คือลิงค์ไปยังข้อความอ้างอิงที่แสดงในตัวอย่างที่ 9 ในหน้านั้น

หวังว่าสิ่งนี้จะให้ความกระจ่างแก่การสืบค้นสื่อ

แก้ไข:

อย่าลืมตรวจสอบ@hybrids คำตอบที่ยอดเยี่ยมเกี่ยวกับวิธีการonlyจัดการคำหลักจริงๆ

ต่อไปนี้เป็นจากAdobe เอกสาร

ข้อกำหนดการสืบค้นสื่อยังให้คำหลักonlyซึ่งมีวัตถุประสงค์เพื่อซ่อนการสืบค้นสื่อจากเบราว์เซอร์รุ่นเก่า เช่นเดียวnotกับคำหลักจะต้องมาที่จุดเริ่มต้นของการประกาศ ตัวอย่างเช่น:

media="only screen and (min-width: 401px) and (max-width: 600px)"

เบราว์เซอร์ที่ไม่รู้จักการสืบค้นสื่อคาดว่ารายการประเภทสื่อที่คั่นด้วยเครื่องหมายจุลภาคและข้อกำหนดระบุว่าควรตัดทอนแต่ละค่าทันทีก่อนอักขระที่ไม่ใช่ตัวเลขและตัวอักษรตัวแรกที่ไม่ใช่เครื่องหมายขีดคั่น ดังนั้นเบราว์เซอร์เก่าควรตีความตัวอย่างก่อนหน้านี้:

media="only"

เนื่องจากไม่มีประเภทสื่อดังกล่าวเท่านั้นสไตล์ชีทจึงถูกละเว้น ในทำนองเดียวกันเบราว์เซอร์เก่าควรตีความ

media="screen and (min-width: 401px) and (max-width: 600px)"

เช่น

media="screen"

กล่าวอีกนัยหนึ่งก็ควรใช้กฎสไตล์กับอุปกรณ์หน้าจอทั้งหมดถึงแม้ว่ามันจะไม่รู้ว่าสิ่งที่สื่อหมายถึงแบบสอบถาม

น่าเสียดายที่ IE 6–8 ไม่สามารถใช้งานข้อกำหนดได้อย่างถูกต้อง

แทนที่จะใช้สไตล์กับอุปกรณ์หน้าจอทั้งหมดมันจะไม่สนใจสไตล์ชีททั้งหมด

ทั้งๆที่มีพฤติกรรมนี้เราขอแนะนำให้นำหน้าข้อความค้นหาสื่อด้วยเฉพาะเมื่อคุณต้องการซ่อนสไตล์จากเบราว์เซอร์อื่น ๆ ที่มีน้อยกว่า

ดังนั้นการใช้

media="only screen and (min-width: 401px)"

และ

media="screen and (min-width: 401px)"

จะมีผลเหมือนกันใน IE6-8: ทั้งคู่จะป้องกันไม่ให้ใช้สไตล์เหล่านั้น อย่างไรก็ตามจะยังคงดาวน์โหลดอยู่

นอกจากนี้ในเบราว์เซอร์ที่รองรับการสืบค้นสื่อ CSS3 ทั้งสองเวอร์ชันจะโหลดสไตล์หากความกว้างวิวพอร์ตมีขนาดใหญ่กว่า401pxและประเภทสื่อเป็นหน้าจอ

ฉันไม่แน่ใจว่าเบราว์เซอร์ใดที่ไม่รองรับการสืบค้นสื่อ CSS3 จะต้องมีonlyเวอร์ชัน

media="only screen and (min-width: 401px)" 

ตรงข้ามกับ

media="screen and (min-width: 401px)"

เพื่อให้แน่ใจว่ามันจะไม่ถูกตีความว่าเป็น

media="screen"

มันจะเป็นการทดสอบที่ดีสำหรับใครบางคนที่มีสิทธิ์เข้าใช้ห้องทดลองอุปกรณ์

หากต้องการสไตล์สำหรับสมาร์ทโฟนจำนวนมากที่มีหน้าจอขนาดเล็กคุณสามารถเขียน:

@media screen and (max-width:480px) { … } 

หากต้องการบล็อกเบราว์เซอร์รุ่นเก่าไม่ให้เห็นสไตล์ชีทโทรศัพท์ iPhone หรือ Android คุณสามารถเขียน:

@media only screen and (max-width: 480px;) { … } 

อ่านบทความนี้สำหรับhttp://webdesign.about.com/od/css3/a/css3-media-queries.htmเพิ่มเติม

คำตอบโดย @hybrid ค่อนข้างให้ข้อมูลยกเว้นไม่ได้อธิบายวัตถุประสงค์ตามที่กล่าวไว้โดย @ashitaka "จะเกิดอะไรขึ้นถ้าคุณใช้วิธีการจาก Mobile First ดังนั้นเรามี CSS มือถือก่อนแล้วจึงใช้ความกว้างขั้นต่ำเพื่อกำหนดเป้าหมายไซต์ขนาดใหญ่ เราไม่ควรใช้คำหลักคำเดียวในบริบทนั้นใช่ไหม "

ต้องการเพิ่มไว้ที่นี่เพื่อจุดประสงค์เพียงเพื่อป้องกันไม่ให้เบราว์เซอร์ที่ไม่สนับสนุนให้ใช้รูปแบบอุปกรณ์อื่น ๆ ราวกับว่ามันเริ่มต้นจาก "หน้าจอ" โดยไม่มีมันจะใช้สำหรับหน้าจอที่ราวกับว่ามันเริ่มจากรูปแบบ "เท่านั้น"

การตอบคำถามของ Ashitaka ให้พิจารณาตัวอย่างนี้

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

หากเราไม่ใช้ "เท่านั้น" มันจะยังคงทำงานตามสไตล์เดสก์ท็อปและจะใช้สไตล์ Android ที่โดดเด่น แต่มีค่าใช้จ่ายที่ไม่จำเป็น ในกรณีนี้หากเบราว์เซอร์ไม่สนับสนุนเบราว์เซอร์จะย้อนกลับไปที่สไตล์ชีทที่สองโดยไม่สนใจสิ่งแรก

@media screen and (max-width:480px) { … } 

screenนี่คือการตั้งค่าขนาดหน้าจอของแบบสอบถามสื่อ เช่นความกว้างสูงสุดของพื้นที่แสดงผลคือ 480px ดังนั้นจึงเป็นการระบุหน้าจอเมื่อเทียบกับสื่อประเภทอื่นที่มี

@media only screen and (max-width: 480px;) { … } 

only screen ที่นี่ใช้เพื่อป้องกันเบราว์เซอร์รุ่นเก่าที่ไม่รองรับการสืบค้นสื่อที่มีคุณสมบัติสื่อไม่ให้ใช้สไตล์ที่ระบุ