@viewport CSS Rule คืออะไร ? + สอนวิธีใช้

โดยปกติแล้ว เวลาเราต้องการจะปรับค่าต่างๆ ที่เกี่ยวกับ viewport เราก็มักจะใช้ viewport meta tag ที่คิดค้นขึ้นมาโดย Apple แต่ W3C มองว่าการปรับแต่ง viewport ควรทำให้เป็นมาตรฐานมากกว่านี้ จึงได้สร้าง “CSS Device Adaptation” ขึ้นมา

รู้จักกับ CSS Device Adaptation

W3C พยายามผลักดันให้ CSS Device Adaptation กลายมาเป็นมาตรฐานใหม่ในการปรับแต่งค่าต่างๆ ไม่ว่าจะเป็น size, zoom factor รวมไปถึง orientation ของ viewport จะเห็นว่าหน้าที่ของมันนั้นเหมือนกับ viewport meta tag เลย เพียงแต่มันจะอยู่ในรูปของ css เท่านั้นเอง

การจะใช้ CSS Device Adaptation นั้น เราจะต้องทำผ่านสิ่งที่เรียกว่า “@viewport rule” สมมติเดิมเราเขียน viewport meta tag แบบนี้

หากเราจะใช้ CSS Device Adaptation ให้เราเปลี่ยนมาเขียนโค้ด css แบบนี้แทน

ตัวอย่างโค้ดทั้ง 2 แบบข้างต้นนั้น แม้จะให้ผลเหมือนกัน แต่การใช้ CSS Device Adaptation นั้นดูจะเหมาะสมกว่า เนื่องจาก html ไม่ได้มีไว้สำหรับปรับแต่งการแสดงผล หน้าที่นี้ควรเป็นของ css มากกว่า

@viewport ทำอะไรได้บ้าง ?

ถึงแม้ว่า viewport meta tag กับ @viewport rule จะทำหน้าที่เหมือนๆ กัน แต่ในบาง properties ของ @viewport rule นั้น จะมีชื่อต่างไปจาก properties เดิมที่เราเคยใช้กับ viewport meta tag อยู่เล็กน้อย

width

เราจะใช้ width ในการกำหนดความกว้างให้กับ viewport จะเห็นว่าชื่อของ property นี้ เหมือนกับที่เราใช้ในการเขียน viewport meta tag เลย สมมติเราต้องการกำหนดให้ viewport มีขนาดตายตัวที่ 320px ให้เราเขียน @viewport rule แบบนี้

หากเราไม่อยากกำหนดขนาด viewport แบบตายตัว เราสามารถกำหนดเป็นช่วงได้ โดยค่าของ width ตัวแรกนั้นจะหมายถึง min-width ส่วนค่าของ width ตัวหลังจะหมายถึง max-width ลองดูตัวอย่างนี้

การเขียน @viewport rule แบบนี้ viewport จะมีความกว้างอย่างน้อยที่สุดคือ 320px สมมติหน้าจอเรากว้าง 240px ขนาดของ viewport จะมีความกว้าง 320px แต่ถ้าหน้าจอเรามีความกว้างมากกว่า 320px viewport ก็จะมีความกว้างเท่ากับหน้าจอในขณะนั้น

หากเราทำ responsive web เราอาจเลือกกำหนด width ให้มีค่าเป็น device-width เหมือนกับที่เคยเขียนโดยใช้ viewport meta tag

zoom

property นี้จะเป็นการกำหนด scale แรกเริ่มของ viewport โดยค่าของมันจะมีหน่วยเป็นจำนวนเท่านั่นเอง

ตัวอย่างนี้ เรากำหนดให้ scale ตอนโหลดมาเป็น 1 เท่า หรือขนาดปกติ และยอมให้ users สามารถ zoom ได้ตั้งแต่ 0.5 เท่า ไปจนถึง 2 เท่า

user-zoom

property นี้เป็นการกำหนดว่าเราจะยอมให้ users สามารถ zoom หน้าเว็บได้หรือไม่ ค่าที่ใส่ได้จะมีแค่ zoom หรือ fixed เท่านั้น

หากเราเขียนแบบนี้ users จะสามารถ zoom หน้าเว็บได้ตามปกติ แต่หากเราไม่อยากให้ users สามารถ zoom ได้ ให้เราเปลี่ยนค่าเป็น fixed

Browser Support

web browsers ที่รองรับ @viewport rule แล้วในขณะนี้มีเพียงแค่ Internet Explorer กับ Opera เท่านั้น หากเราจะใช้ @viewport rule ตอนนี้เลย เราจะต้องใส่ vendor prefix แบบนี้

อย่างไรก็ตาม เรายังคงต้องใส่ viewport meta tag เอาไว้ตามเดิม จนกว่า web browsers ส่วนใหญ่จะรองรับ @viewport rule

Case Study – ปัญหา Viewport ของ IE10 บน Windows 8

บน Windows 8 จะมี feature ใหม่อยู่อย่างหนึ่งที่เรียกว่า “Snap” คือเราจะสามารถตรึงหน้าต่างของ application เอาไว้ที่ด้านข้างของหน้าจอได้ ซึ่งมันจะมีประโยชน์ เวลาเราต้องการทำอะไรหลายอย่างพร้อมๆ กัน (Multitasking) นอกจากนี้ เรายังสามารถปรับขนาดของหน้าต่างที่อยู่ในสถานะ snap ได้อีกด้วย

ปัญหาที่หลายๆ คนพบบน Windows 8 ก็คือ เมื่อ IE10 อยู่ในสถานะ snap การแสดงผลของ responsive web จะดูแปลกๆ ไป สมมติว่าหน้าต่างที่ snap อยู่ มีขนาดประมาณ 300px responsive web ก็น่าจะแสดงผลเหมือนกับที่แสดงบน iPhone ในแนวตั้ง แต่ผลที่ได้ก็คือ responsive web กลับแสดงผลเหมือน desktop ทำไมจึงเป็นเช่นนี้ ?

windows8_IE10_snap

Windows 8 review by Dana Wollman

responsive web ที่อยู่ในสถานะ snap(ซ้ายมือ) แสดงผลเหมือน desktop version(ขวามือ)

ที่เป็นเช่นนี้ก็เพราะว่า IE10 บน Windows 8 จะไม่สนใจ viewport meta tag หากหน้าจอในขณะนั้น มีความกว้างน้อยกว่า 400px การกำหนด width ให้มีค่าเท่ากับ device-width ที่ viewport meta tag จึงใช้ไม่ได้ผล ในการแก้ปัญหานี้ เราจำเป็นต้องใช้ CSS Device Adaptation เข้ามาช่วย ลองดูตัวอย่างนี้

จากโค้ดด้านบน เป็นการกำหนดให้ viewport มีขนาด 320px(แสดงผลเหมือน iPhone) โดยเราจะใช้ media queries มาครอบ @viewport rule เอาไว้ เพื่อให้มันส่งผลเมื่อหน้าจอในขณะนั้น มีความกว้างน้อยกว่า 400px(ความกว้างที่ IE10 บน Windows 8 ไม่อ่าน viewport meta tag)

แต่ถ้าเราลดความกว้างของ snapped window ลงมาที่ 240px อะไรจะเกิดขึ้น ? คำตอบคือ responsive web จะมีหน้าตาเหมือนเดิม เพียงแต่จะถูกลด scale ลงมา เนื่องจากเรากำหนดให้ viewport มีขนาดคงที่ที่ 320px ซึ่งหมายความว่าตัวหนังสือจะมีขนาดเล็กลงอย่างแน่นอน จะดีกว่ามั้ย หากเราเปลี่ยน @viewport rule มาเป็นแบบนี้

จากโค้ดด้านบน จะสังเกตว่าเราไม่ได้ใช้ media queries เลย นั่นหมายความว่า มันจะนำไปใช้กับหน้าจอทุกขนาด แทนที่เราจะกำหนดให้ viewport มีขนาดตายตัว ให้เราเปลี่ยนมาใช้ device-width แทน ในกรณีนี้ หากหน้าจอมีความกว้างลดลงมาที่ 240px responsive web จะมีหน้าตาเปลี่ยนไปเล็กน้อยตามการ flow ของเนื้อหา โดยที่ scale ยังคงมีขนาดเท่าเดิมอยู่(ขึ้นอยู่กับการทำ responsive web ด้วยว่าออกแบบมาให้รองรับถึงขนาด 240px หรือไม่)

นอกจากนี้ เรายังสามารถนำ media queries มาประยุกต์ใช้กับ @viewport rule เพื่อเสริมความสามารถให้เหนือกว่า viewport meta tag ได้ ลองดูตัวอย่างนี้

จากโค้ดด้านบน device ที่มีขนาด 480×800 จะมีความกว้างของ viewport ค่าเดียวกันคือ 480px นั่นหมายความว่า หน้าตาของ responsive web ที่แสดงบน device นี้จะเหมือนกันทั้งแนวตั้งและแนวนอน(เนื้อหาจะไม่ flow ตาม fluid grid) เพียงแต่จะมี scale ที่เปลี่ยนไปเท่านั้นเอง

เริ่มใช้ CSS Device Adaptation ตั้งแต่วันนี้

ถึงแม้ว่า CSS Device Adaptation จะยังคงมี web browsers ที่รองรับไม่มากเท่าไรนัก แต่มันก็กำลังจะกลายเป็นมาตรฐานในไม่ช้านี้ ต้องขอบคุณปัญหาของ IE10 บน Windows 8 ที่ทำให้นักพัฒนาหลายๆ คน เริ่มรู้จักและหันมาใช้ @viewport rule มากขึ้น หากเราคำนึงถึงการใช้งานของ users เป็นหลักแล้วล่ะก็ การนำ @viewport rule มาประยุกต์ใช้ให้เหมาะสมกับเนื้อหา จะช่วยพัฒนาในเรื่องของประสบการณ์การใช้งานของ users(UX) ให้ดีขึ้นได้อย่างแน่นอน

(Visited 7,765 times, 1 visits today)

4 Responses to “@viewport CSS Rule คืออะไร ? + สอนวิธีใช้”

  1. Mode Dsigner says:

    ชอบมากเลยครับ นั่งอ่านไปหลายบทความ เขียนและอธิบายได้ดีมากเลย

  2. แก้ปัญหาตอน snap mode ใน win 8 ได้ง่ายๆเลยแหะ แจ่มๆ

  3. รบกวนสอบถามหน่อยครับถ้าเรากำหนดให้ zoom ได้เฉพาะ images จะได้หรือเปล่าครับ

  4. ไม่ได้ครับ แบบนั้นต้องเขียน js เองอะครับ

Leave a Reply