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

การใช้งานหลักของแท็กวิวพอร์ต

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

< meta name = "viewport" content = "ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1.0">

การใช้แท็กวิวพอร์ตสำหรับไซต์ที่ไม่ได้ออกแบบมาสำหรับอุปกรณ์เคลื่อนที่

ดังที่คุณทราบ ความกว้างวิวพอร์ตเริ่มต้นบน iPhone คือ 980px แต่การออกแบบของคุณอาจไม่พอดีกับช่วงนี้ มันอาจจะกว้างขึ้นหรือแคบลง ด้านล่างนี้คือสองตัวอย่างที่คุณสามารถใช้แท็กเหล่านี้เพื่อปรับปรุงการแสดงผลไซต์ของคุณบนอุปกรณ์เคลื่อนที่

ตัวอย่าง

ภาพหน้าจอด้านซ้ายแสดงให้เห็นว่าไซต์จะมีลักษณะอย่างไรเมื่อไม่มีแท็ก อย่างที่คุณเห็นหน้าสัมผัสทั้งสองด้าน ผู้ดูแลเว็บได้เพิ่มแท็ก Viewport เพื่อตั้งค่าความกว้างของหน้าต่างเป็น 1024px ดังนั้นจึงเหลือพื้นที่เพิ่มเติมทางด้านซ้ายและด้านขวา

< meta name = "viewport" content = "width=1024" >

อีกตัวอย่างหนึ่ง

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

คุณสามารถแก้ไขได้โดยตั้งค่าความกว้างของหน้าต่างเป็น 720px ความกว้างของการออกแบบของคุณไม่เปลี่ยนแปลง แต่ iPhone จะปรับขนาดให้พอดีที่ 720px

< meta name = "viewport" content = "width=720" >

ข้อผิดพลาดทั่วไป

ข้อผิดพลาดทั่วไปคือคนมักจะเติม เริ่มต้น - สเกล = 1สำหรับการออกแบบที่เกินขนาด ซึ่งจะทำให้เพจมีขนาด 100% โดยไม่ต้องปรับขนาด หากโปรเจ็กต์ของคุณไม่พอดีกับหน้าจอ ผู้ใช้จะต้องซูมออกเพื่อดูเต็มหน้า มันแย่ยิ่งกว่านั้นอีกเมื่อรวมกัน ผู้ใช้ - ปรับขนาดได้ = ไม่หรือ สูงสุด - สเกล = 1กับ เริ่มต้น - สเกล = 1- นี่จะเป็นการปิดใช้ตัวเลือกการซูม ผู้ใช้ไม่มีตัวเลือกในการลดขนาดหน้าเพื่อดู

มาสร้างเพจง่ายๆ ด้วยมาร์กอัปขั้นต่ำ:

สวัสดีชาวโลก!

ตอนนี้เรามาเปิดหน้านี้บนอุปกรณ์มือถือกันดีกว่า เมื่อเปิดขึ้นมาเราจะพบว่าหน้าของเราจะแสดงดังนี้:

อย่างที่คุณเห็น ข้อความมีขนาดเล็กเกินไปที่จะอ่าน มีพื้นที่ว่างมากมาย และเพื่อที่จะอ่านข้อความนี้ เราต้องขยายเข้าไป

ทำไมสิ่งนี้ถึงเกิดขึ้น?

ปัญหาเกี่ยวกับเบราว์เซอร์มือถือ

เมื่อเปรียบเทียบเบราว์เซอร์บนมือถือและเดสก์ท็อป ความแตกต่างที่ชัดเจนที่สุดคือ ขนาดหน้าจอ- โดยค่าเริ่มต้น เบราว์เซอร์มือถือจะแสดงไซต์ที่ออกแบบมาสำหรับเบราว์เซอร์เดสก์ท็อปทั่วไปที่แย่กว่าที่สามารถทำได้: ไม่ว่าจะโดยการลดขนาด ทำให้ข้อความและเนื้อหาอื่น ๆ เล็กเกินไปและไม่สามารถอ่านได้ (เช่นเดียวกับในเวอร์ชันของเรา) หรือโดยการแสดงเพียงส่วนเล็ก ๆ ของ ไซต์ที่เหมาะกับหน้าจอ

หากคุณคิดอย่างมีเหตุผล ก็สมเหตุสมผลแล้ว: เบราว์เซอร์มือถือมองเห็นหน้าเว็บและถือว่าหน้าเว็บนั้นถูกสร้างขึ้นสำหรับเบราว์เซอร์เวอร์ชันเดสก์ท็อป ซึ่งเป็นเรื่องจริงสำหรับไซต์ส่วนใหญ่ จากสิ่งนี้ เบราว์เซอร์นี้จะตั้งค่าความกว้างของหน้าเป็น 980px (Safari iPhone) และพยายามปรับให้พอดีกับหน้าจอสมาร์ทโฟนโดยแสดงในระดับที่ลดลงมากที่สุด โดยทั่วไป ความกว้างของไซต์จะอยู่ที่ประมาณนี้ ดังนั้นเมื่อคุณเปิดหน้าเว็บโดยเฉลี่ยบนอุปกรณ์เคลื่อนที่ หน้าเว็บจะขยายจนเต็มความกว้าง แต่จะเล็กกว่าขนาดเดิม 2-3 เท่า

ดังนั้นหากเราต้องการเพิ่มประสิทธิภาพไซต์สำหรับสมาร์ทโฟน ตัวเลือกนี้จะใช้งานไม่ได้ เราจำเป็นต้องบอกเบราว์เซอร์ว่าเพจของเราตั้งใจให้แสดงบนอุปกรณ์มือถือ และตั้งกฎสำหรับการทำงานที่ถูกต้องของวิวพอร์ต

และนี่คือสาเหตุที่เราจะใช้เมตาแท็ก วิวพอร์ตซึ่งเปิดตัวโดย Apple และคัดลอกโดยผู้อื่นตามปกติ

เพิ่มลงในบล็อก บรรทัดต่อไปนี้:

และนี่คือสิ่งที่จะเกิดขึ้นตามมา:

มันเป็นเรื่องที่แตกต่างอย่างสิ้นเชิง โดยการตั้งค่าเมตาแท็กวิวพอร์ตเป็น “ความกว้างของอุปกรณ์”เรากำลังบอกเบราว์เซอร์ว่าความกว้างของวิวพอร์ตคือความกว้างของอุปกรณ์นั้น แทนที่จะเป็นความกว้างมาตรฐาน 980px ที่อาจถือว่าเป็นค่าเริ่มต้น บนสมาร์ทโฟนจำนวนมาก ความกว้างของหน้าจอคือ 320px (ในโหมดแนวตั้ง) คุณสามารถตั้งค่าความกว้างได้เองเป็น 320px ซึ่งจะให้ผลลัพธ์เดียวกัน แต่ในสมาร์ทโฟนบางรุ่น ความกว้างของหน้าจออาจแตกต่างกัน ดังนั้นตัวเลือกที่ดีที่สุดคือใช้ความกว้างของอุปกรณ์

หนึ่งในตัวเลือกทั่วไปในการกำหนดวิวพอร์ตคือตัวเลือกต่อไปนี้:

ซึ่งกำหนดความกว้างของหน้าและกำหนดมาตราส่วนเริ่มต้น

นอกจากนี้ คุณมักจะพบตัวเลือกนี้:

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

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับแท็กเหล่านี้และแท็กบนมือถือเฉพาะอื่นๆ ได้

ตัวเลือกที่เป็นไปได้สำหรับเมตาแท็กวิวพอร์ต

คุณลักษณะ	ความหมายที่เป็นไปได้	คำอธิบาย
ความกว้าง	(ตั้งแต่ 200px – 10,000px) หรือค่าคงที่ความกว้างของอุปกรณ์	กำหนดความกว้างของวิวพอร์ต หากไม่ได้ระบุความกว้าง ค่าจะถูกตั้งเป็น 980px ใน Safari บนมือถือ, 850px ใน Opera, 800px ใน Android WebKit และ 974px ใน IE
ความสูง	ค่าจำนวนเต็มที่ไม่เป็นลบ (จาก 223px ถึง 10,000px) หรือค่าคงที่ความสูงของอุปกรณ์	กำหนดความสูงของวิวพอร์ต ในกรณีส่วนใหญ่ คุณสามารถละเว้นแอตทริบิวต์นี้ได้
ระดับเริ่มต้น	ค่า 1.0 - ห้ามปรับขนาด	กำหนดขนาดหน้าเริ่มต้น ยิ่งตัวเลขสูง สเกลก็จะยิ่งสูงขึ้น
ผู้ใช้ปรับขนาดได้	ไม่หรือใช่	กำหนดว่าผู้ใช้สามารถซูมเข้าหน้าต่างได้หรือไม่ ค่าเริ่มต้นคือ "ใช่" ใน Safari บนมือถือ
ขนาดขั้นต่ำ	ตัวเลขที่มีจุด (ตั้งแต่ 0.1 ถึง 10) 1.0 - อย่าปรับขนาด	กำหนดขนาดวิวพอร์ตขั้นต่ำ ค่าเริ่มต้นคือ “0.25” ใน Safari บนมือถือ
ขนาดสูงสุด	ตัวเลขที่มีจุด (ตั้งแต่ 0.1 ถึง 10) 1.0 - อย่าปรับขนาด	กำหนดการซูมวิวพอร์ตสูงสุด ค่าเริ่มต้นคือ “1.6” ใน Safari บนมือถือ

ตารางความเข้ากันได้ของวิวพอร์ต

สองวิวพอร์ต

สมมติว่าวิวพอร์ตแคบเกินไปสำหรับเทมเพลต CSS ของเรา วิธีแก้ปัญหาที่ชัดเจนคือทำให้วิวพอร์ตกว้างขึ้น อย่างไรก็ตาม ก่อนอื่น มาแบ่งแนวคิดของวิวพอร์ตออกเป็นสองส่วน: วิวพอร์ตภาพและวิวพอร์ตเพจ

George Cummins อธิบายแนวคิดของวิวพอร์ตได้ดีมากใน Stack Overflow:

คิดว่าวิวพอร์ตของหน้าเป็นรูปภาพขนาดใหญ่ที่มีขนาดและรูปร่างคงที่ ทีนี้ลองนึกภาพกรอบเล็ก ๆ ที่คุณใช้ดูภาพขนาดใหญ่นี้ กรอบนี้ล้อมรอบด้วยวัสดุทึบแสงซึ่งทำให้คุณไม่สามารถมองเห็นภาพขนาดใหญ่ทั้งหมดได้ ยกเว้นบางส่วนเท่านั้น ส่วนของภาพขนาดใหญ่ที่มองเห็นได้ผ่านเฟรมจะเป็นวิวพอร์ตภาพ หากคุณย้ายออกจากภาพขนาดใหญ่ที่มีกรอบ (ซูมออก เช่น ลดขนาด) คุณสามารถเห็นภาพทั้งหมดพร้อมกัน หรือเข้ามาใกล้มากขึ้น (ซูมเข้า เพิ่มขนาด) คุณจะเห็นเพียงบางส่วนของภาพเท่านั้น ภาพ. นอกจากนี้คุณยังสามารถหมุนเฟรมเพื่อเปลี่ยนการวางแนว (แนวตั้งหรือแนวนอน) ในขณะที่ขนาดและรูปร่างของรูปภาพขนาดใหญ่ (วิวพอร์ตเพจ) ยังคงไม่เปลี่ยนแปลงอยู่เสมอ

วิวพอร์ตภาพ- ส่วนหนึ่งของเพจที่ปรากฏบนหน้าจอในปัจจุบัน ผู้ใช้สามารถเลื่อนเพื่อเปลี่ยนส่วนที่มองเห็นได้ของหน้า หรือใช้การซูมเพื่อเปลี่ยนขนาดของวิวพอร์ตภาพ

เค้าโครงหน้า โดยเฉพาะอย่างยิ่งหากมีการระบุความกว้างเป็นเปอร์เซ็นต์ จะถูกคำนวณโดยสัมพันธ์กัน วิวพอร์ตหน้าซึ่งกว้างกว่าวิวพอร์ตภาพอย่างมาก

ดังนั้นองค์ประกอบ - จะใช้ความกว้างของวิวพอร์ตเพจในตอนแรก จากนั้น CSS จะทำงานเหมือนกับว่าหน้าจอกว้างกว่าหน้าจอโทรศัพท์มาก ซึ่งจะทำให้ไซต์มีลักษณะการทำงานเหมือนกับในเบราว์เซอร์บนเดสก์ท็อป

วิวพอร์ตภาพนั้นกว้างแค่ไหน? ขึ้นอยู่กับเบราว์เซอร์ Safari iPhone ใช้ 980px, Opera ใช้ 850px, Android WebKit ใช้ 800px และ IE ใช้ 974px

เบราว์เซอร์บางตัวมีพฤติกรรมแตกต่างออกไป:

Symbian WebKit พยายามเทียบวิวพอร์ตเพจกับวิวพอร์ตภาพ และนั่นหมายความว่าองค์ประกอบเปอร์เซ็นต์ความกว้างสามารถทำงานได้อย่างคาดเดาไม่ได้ อย่างไรก็ตาม หากหน้าไม่พอดีกับวิวพอร์ตภาพเนื่องจากค่าสัมบูรณ์ เบราว์เซอร์จะขยายวิวพอร์ตหน้าเป็นสูงสุด 850 พิกเซล

Samsung WebKit ทำให้วิวพอร์ตเพจมีความกว้างเท่ากับองค์ประกอบที่กว้างที่สุด

บน BlackBerry ด้วยมาตราส่วน 100% วิวพอร์ตเพจจะเท่ากับวิวพอร์ตภาพไม่ว่าในกรณีใดก็ตาม

กำลังซูม

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

ทำความเข้าใจเกี่ยวกับวิวพอร์ตเพจ

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

ความจริงก็คือขนาดของวิวพอร์ตของหน้าเบราว์เซอร์นั้นตรงกับหน้าจอในระดับที่ลดลงสูงสุดดังนั้นจึงเท่ากับวิวพอร์ตภาพ

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

ความกว้างของวิวพอร์ตหน้าจะเท่ากันเสมอ หากคุณเปลี่ยนการวางแนวของหน้าจอสมาร์ทโฟน วิวพอร์ตภาพจะเปลี่ยนไป แต่ในขณะเดียวกันเบราว์เซอร์มือถือจะปรับให้เข้ากับการวางแนวใหม่โดยการซูมเข้าเล็กน้อยเพื่อให้วิวพอร์ตของหน้าจะมีความกว้างเท่ากับวิวพอร์ตภาพอีกครั้ง

สิ่งนี้ส่งผลต่อความสูงของวิวพอร์ตเพจ ซึ่งตอนนี้มีขนาดเล็กกว่าในแนวตั้งมาก แต่สำหรับนักพัฒนาแล้ว ความกว้างมีความสำคัญมากกว่าความสูง

Android และความหนาแน่นเป้าหมาย dpi

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

จะไม่มีการปรับขนาดบนอุปกรณ์ HDPI (240dpi)

รายการนี้หมายความว่าจะไม่มีการปรับขนาดบนอุปกรณ์ Android ใดๆ

เป็นพื้นที่ของหน้าต่างที่สามารถดูเนื้อหาเว็บได้ ซึ่งมักจะไม่เท่ากันกับหน้าที่แสดงผล ในกรณีนี้เบราว์เซอร์จะมีแถบเลื่อนให้ผู้ใช้เลื่อนดูและเข้าถึงเนื้อหาทั้งหมด

อุปกรณ์ที่มีหน้าจอแคบ (เช่น โทรศัพท์มือถือ) เรนเดอร์เพจในหน้าต่างเสมือนหรือวิวพอร์ต ซึ่งโดยปกติจะกว้างกว่าหน้าจอ จากนั้นย่อขนาดผลลัพธ์ที่เรนเดอร์ลงเพื่อให้มองเห็นทั้งหมดได้ในคราวเดียว ผู้ใช้สามารถแพนและซูมเพื่อดูส่วนต่างๆ ของเพจได้ ตัวอย่างเช่น หากหน้าจอมือถือมีความกว้าง 640px หน้าเว็บอาจแสดงผลด้วยวิวพอร์ตเสมือน 980px จากนั้นจะถูกย่อให้เล็กลงเพื่อให้พอดีกับพื้นที่ 640px

การดำเนินการนี้เกิดขึ้นเนื่องจากหน้าเว็บหลายหน้าไม่ได้รับการปรับให้เหมาะกับอุปกรณ์เคลื่อนที่ และพัง (หรืออย่างน้อยก็ดูแย่) เมื่อแสดงผลที่ความกว้างวิวพอร์ตเล็กน้อย วิวพอร์ตเสมือนนี้เป็นวิธีการทำให้ไซต์ทั่วไปที่ไม่ได้เพิ่มประสิทธิภาพสำหรับมือถือดูดีขึ้นบนอุปกรณ์ที่มีหน้าจอแคบ

ป้อนเมตาแท็กวิวพอร์ต

อย่างไรก็ตาม กลไกนี้ไม่ค่อยดีนักสำหรับเพจที่ได้รับการปรับให้เหมาะสมสำหรับหน้าจอแคบโดยใช้การสืบค้นสื่อ - หากวิวพอร์ตเสมือนคือ 980px เป็นต้น การสืบค้นสื่อที่เริ่มต้นที่ 640px หรือ 480px หรือน้อยกว่าจะไม่ถูกนำมาใช้ ซึ่งจำกัดประสิทธิภาพของการดังกล่าว เทคนิคการออกแบบที่ตอบสนอง

เพื่อบรรเทาปัญหานี้ Apple ได้เปิดตัว "เมตาแท็กวิวพอร์ต" ใน Safari iOS เพื่อให้นักพัฒนาเว็บควบคุมขนาดและขนาดของวิวพอร์ต ขณะนี้เบราว์เซอร์มือถืออื่นๆ จำนวนมากรองรับแท็กนี้ แม้ว่าจะไม่ได้เป็นส่วนหนึ่งของมาตรฐานเว็บใดๆ ก็ตาม Apple" เอกสารของทำงานได้ดีในการอธิบายว่านักพัฒนาเว็บสามารถใช้แท็กนี้ได้อย่างไร แต่เราจำเป็นต้องทำงานด้านนักสืบเพื่อหาคำตอบว่าจะนำไปใช้ใน Fennec ได้อย่างไร ตัวอย่างเช่น เอกสารของ Safari ระบุว่าเนื้อหาเป็น "รายการที่คั่นด้วยเครื่องหมายจุลภาค" แต่เบราว์เซอร์และหน้าเว็บที่มีอยู่ใช้เครื่องหมายจุลภาค อัฒภาค และช่องว่างผสมกันเป็นตัวคั่น

เรียนรู้เพิ่มเติมเกี่ยวกับวิวพอร์ตในเบราว์เซอร์มือถือต่างๆ ใน ​​A Tale of Two Viewports ที่ quirksmode.org

ข้อมูลพื้นฐานเกี่ยวกับวิวพอร์ต

ไซต์ที่ปรับให้เหมาะสมสำหรับมือถือโดยทั่วไปประกอบด้วยสิ่งต่อไปนี้:

คุณสมบัติความกว้างควบคุมขนาดของวิวพอร์ต สามารถตั้งค่าเป็นจำนวนพิกเซลเฉพาะ เช่น width=600 หรือเป็นค่าพิเศษ device-width ซึ่งเป็นความกว้างของหน้าจอในพิกเซล CSS ที่ระดับ 100% (มีค่าความสูงและความสูงของอุปกรณ์ที่สอดคล้องกัน ซึ่งอาจมีประโยชน์สำหรับหน้าเว็บที่มีองค์ประกอบที่เปลี่ยนขนาดหรือตำแหน่งตามความสูงของวิวพอร์ต)

คุณสมบัติมาตราส่วนเริ่มต้นจะควบคุมระดับการซูมเมื่อโหลดเพจครั้งแรก คุณสมบัติขนาดสูงสุด , ขนาดต่ำสุด และคุณสมบัติที่ผู้ใช้ปรับขนาดได้จะควบคุมวิธีที่ผู้ใช้ได้รับอนุญาตให้ซูมหน้าเข้าหรือออก

พิกเซลไม่ใช่พิกเซล

ในช่วงไม่กี่ปีที่ผ่านมา ความละเอียดของหน้าจอได้เพิ่มขึ้นจนจนแต่ละพิกเซลแยกแยะได้ยากด้วยสายตามนุษย์ ตัวอย่างเช่น สมาร์ทโฟนรุ่นล่าสุดโดยทั่วไปจะมีหน้าจอขนาด 5 นิ้วที่มีความละเอียดสูงกว่า 1920-1080 พิกเซล (~400 dpi) ด้วยเหตุนี้ เบราว์เซอร์จำนวนมากจึงสามารถแสดงหน้าเว็บของตนในขนาดทางกายภาพที่เล็กลงได้โดยการแปลพิกเซลฮาร์ดแวร์หลายตัวสำหรับ "พิกเซล" ของ CSS แต่ละตัว ในตอนแรกสิ่งนี้ทำให้เกิดปัญหาด้านการใช้งานและความสามารถในการอ่านบนเว็บไซต์ที่ได้รับการปรับปรุงระบบสัมผัสหลายแห่ง Peter-Paul Koch เขียนเกี่ยวกับปัญหานี้ใน A pixel is not a pixel

บนหน้าจอที่มี dpi สูง หน้าเว็บที่มีมาตราส่วนเริ่มต้น=1 จะถูกซูมอย่างมีประสิทธิภาพด้วยเบราว์เซอร์ ข้อความจะเรียบและคมชัด แต่ภาพบิตแมปอาจจะไม่ใช้ประโยชน์จากความละเอียดเต็มหน้าจอ เพื่อให้ได้ภาพที่คมชัดยิ่งขึ้นบนหน้าจอเหล่านี้ นักพัฒนาเว็บอาจต้องการออกแบบภาพหรือเลย์เอาต์ทั้งหมดในขนาดที่สูงกว่าขนาดสุดท้าย จากนั้นจึงย่อขนาดลงโดยใช้คุณสมบัติ CSS หรือวิวพอร์ต สิ่งนี้สอดคล้องกับข้อกำหนด CSS 2.1 ซึ่งระบุว่า:

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

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

อัตราส่วนพิกเซลเริ่มต้นขึ้นอยู่กับความหนาแน่นของจอแสดงผล บนจอแสดงผลที่มีความหนาแน่นน้อยกว่า 200dpi อัตราส่วนคือ 1.0 บนจอแสดงผลที่มีความหนาแน่นระหว่าง 200 ถึง 300dpi อัตราส่วนคือ 1.5 สำหรับจอแสดงผลที่มีความหนาแน่นมากกว่า 300dpi อัตราส่วนคือพื้นจำนวนเต็ม ( ความหนาแน่น/150จุดต่อนิ้ว) โปรดทราบว่าอัตราส่วนเริ่มต้นจะเป็นจริงเฉพาะเมื่อมาตราส่วนวิวพอร์ตเท่ากับ 1 มิฉะนั้น ความสัมพันธ์ระหว่างพิกเซล CSS และพิกเซลของอุปกรณ์จะขึ้นอยู่กับระดับการซูมปัจจุบัน

ความกว้างของวิวพอร์ตและความกว้างของหน้าจอ

เว็บไซต์สามารถตั้งค่าวิวพอร์ตเป็นขนาดเฉพาะได้ ตัวอย่างเช่น คำจำกัดความ "width=320, Initial-scale=1" สามารถใช้เพื่อให้พอดีกับจอแสดงผลโทรศัพท์ขนาดเล็กในโหมดแนวตั้งได้อย่างแม่นยำ ซึ่งอาจทำให้เกิดปัญหาเมื่อเบราว์เซอร์ไม่แสดงหน้าเว็บในขนาดที่ใหญ่ขึ้น ในการแก้ไขปัญหานี้ เบราว์เซอร์จะขยายความกว้างของวิวพอร์ตหากจำเป็นเพื่อให้เต็มหน้าจอตามขนาดที่ร้องขอ ซึ่งจะเป็นประโยชน์อย่างยิ่งกับอุปกรณ์ที่มีหน้าจอขนาดใหญ่ เช่น iPad (การเลือกวิวพอร์ตสำหรับไซต์ iPad ของ Allen Pike มีคำอธิบายที่ดีสำหรับนักพัฒนาเว็บ)

สำหรับหน้าที่ตั้งค่ามาตราส่วนเริ่มต้นหรือสูงสุด หมายความว่าคุณสมบัติ width แปลเป็น a ขั้นต่ำความกว้างวิวพอร์ต ตัวอย่างเช่น หากเลย์เอาต์ของคุณต้องการความกว้างอย่างน้อย 500 พิกเซล คุณสามารถใช้มาร์กอัปต่อไปนี้ได้ เมื่อหน้าจอกว้างมากกว่า 500 พิกเซล เบราว์เซอร์จะขยายวิวพอร์ต (แทนที่จะซูมเข้า) เพื่อให้พอดีกับหน้าจอ:

อื่นๆ ที่มีให้เลือกได้แก่ มาตราส่วนขั้นต่ำ , มาตราส่วนสูงสุด และขนาดที่ผู้ใช้ปรับขนาดได้ คุณสมบัติเหล่านี้ส่งผลต่อขนาดและความกว้างเริ่มต้น รวมถึงการจำกัดการเปลี่ยนแปลงระดับการซูม

เบราว์เซอร์มือถือบางรุ่นอาจไม่รองรับการเปลี่ยนแปลงการวางแนวในลักษณะเดียวกัน ตัวอย่างเช่น Mobile Safari มักจะเพียงซูมหน้าเมื่อเปลี่ยนจากแนวตั้งเป็นแนวนอน แทนที่จะจัดวางหน้าเหมือนที่เคยทำเมื่อโหลดในแนวนอน หากนักพัฒนาเว็บต้องการให้การตั้งค่ามาตราส่วนของตนคงที่เมื่อเปลี่ยนการวางแนวบน iPhone พวกเขาจะต้องเพิ่มค่ามาตราส่วนสูงสุดเพื่อป้องกันการซูมนี้ ซึ่งมีผลข้างเคียงที่บางครั้งไม่พึงประสงค์ในการป้องกันไม่ให้ผู้ใช้ซูมเข้า:

ระงับการซูมขนาดเล็กที่ใช้กับสมาร์ทโฟนหลายรุ่นโดยตั้งค่าสเกลเริ่มต้นและค่าสเกลขั้นต่ำเป็น 0.86 ผลลัพธ์คือการเลื่อนแนวนอนจะถูกระงับในทิศทางใดก็ได้ และผู้ใช้สามารถซูมเข้าได้หากต้องการ

ขนาดวิวพอร์ตทั่วไปสำหรับอุปกรณ์เคลื่อนที่และแท็บเล็ต

หากคุณต้องการทราบว่าอุปกรณ์เคลื่อนที่และแท็บเล็ตใดบ้างที่มีความกว้างของวิวพอร์ต มีรายการไฟล์ . ซึ่งจะให้ข้อมูลต่างๆ เช่น ความกว้างของวิวพอร์ตในแนวตั้งและแนวนอน รวมถึงขนาดหน้าจอจริง ระบบปฏิบัติการ และความหนาแน่นของพิกเซลของอุปกรณ์

ข้อมูลจำเพาะ

ข้อมูลจำเพาะ	สถานะ	ความคิดเห็น
การปรับอุปกรณ์ CSS คำจำกัดความของ “ “ในข้อกำหนดนั้น	ร่างการทำงาน	อธิบายองค์ประกอบ Viewport META อย่างไม่ปกติ

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

บ่อยครั้งผู้คนไม่เข้าใจความแตกต่างระหว่างความกว้าง (ความกว้าง) และความกว้างของอุปกรณ์ (และยิ่งกว่านั้น ยังมีตัวอย่างที่มีความกว้างของอุปกรณ์ขั้นต่ำและความกว้างสูงสุดของอุปกรณ์) โดยใช้คำสั่งสื่อ CSS ความเข้าใจผิดนี้นำไปสู่โค้ดที่ไม่ดีและทำให้นักพัฒนาต้องทำงานมากขึ้น คำถามนี้เกิดขึ้นบ่อยครั้งในฟอรัม SitePoint ดังนั้นจึงถึงเวลาอธิบายรายละเอียดเพิ่มเติมแล้ว บทความนี้จะกล่าวถึงปัญหานี้และพิจารณาตัวเลือกที่คุณควรใช้เมื่อสร้างเว็บไซต์แบบตอบสนองอย่างละเอียด

คำจำกัดความพื้นฐาน

มากำหนดสิ่งที่เราหมายถึงเมื่อเราพูดถึงคิวรีสื่อตาม "ความกว้าง" และ "ความกว้างของอุปกรณ์" คำพูดด้านล่างนี้มาจากบทความ MDN เกี่ยวกับการสืบค้นสื่อ และมีคำจำกัดความของ "ความกว้าง" นี้:

คุณสมบัติสภาพแวดล้อม "ความกว้าง" อธิบายความกว้างของพื้นผิวจอแสดงผลของอุปกรณ์เอาท์พุต (ตัวอย่างเช่น ความกว้างของหน้าต่างเอกสารหรือความกว้างของหน้าต่างหน้าบนเครื่องพิมพ์)

และนี่คือวิธีที่ MDN กำหนด "ความกว้างของอุปกรณ์":

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

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

ดังที่ได้กล่าวไปแล้ว ความแตกต่างที่สำคัญระหว่างความกว้างและความกว้างของอุปกรณ์ก็คือ ความกว้างของอุปกรณ์ไม่ตรงกับพื้นที่การรับชมของอุปกรณ์ใดอุปกรณ์หนึ่งเสมอไป

แท็บเล็ตและอุปกรณ์มือถือส่วนใหญ่ไม่ได้มี 1 พิกเซลของอุปกรณ์ต่อ 1 พิกเซล CSS เสมอไป ตัวอย่างเช่นคุณควรรู้ว่า iPhone 4 มีพื้นที่การรับชมมาตรฐาน 640x960 ซึ่งหมายความว่าในตัวอย่างนี้ ความกว้างของอุปกรณ์ของ iPhone4 คือ 320x480 ประเด็นก็คือ Apple เข้าใจดีว่าไม่ใช่ทุกไซต์ที่ได้รับการออกแบบมาให้ตอบสนองและพยายามทำให้ทุกคนพอใจโดยให้ความกว้างประมาณ 980px เพื่อแสดงไซต์เวอร์ชันเดสก์ท็อป ซึ่งหมายความว่าหากไม่มีเมตาแท็กวิวพอร์ต iPhone4 จะนำไซต์และเรนเดอร์ราวกับว่ามีความกว้าง 980px ในขณะที่บีบให้เป็นหน้าจอกว้าง 320px ส่งผลให้ไซต์ปรากฏเล็กลงจากมุมมองของผู้ใช้

มาเริ่มกันเลย

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

เมื่อตัวอย่างนี้ปรากฏบนหน้าของเรา หากเราดูหน้านั้นบนอุปกรณ์ที่แตกต่างกัน ข้อความค้นหาสื่อที่แตกต่างกันก็จะเริ่มทำงาน หากไม่มีสิ่งนี้ เมื่อดูเพจบนอุปกรณ์เฉพาะ เพจนั้นก็จะปรากฏเป็นเวอร์ชันที่เล็กกว่าของเพจ อุปกรณ์จะพยายามบีบเว็บไซต์ทั้งหมดให้เป็นหน้าจอกว้าง 320px และสิ่งนี้ไม่ดีสำหรับคุณหรือผู้ใช้ของคุณ! ผู้ใช้ไม่ชอบซูมเข้าไปในไซต์เพื่อดูเนื้อหา และไม่ต้องการเลื่อนกลับไปกลับมาอย่างแน่นอน

ตัวอย่างเช่น ลองใช้ iPhone 4 ซึ่งมีความกว้างวิวพอร์ตมาตรฐานที่ 980px หากไม่มีเมตาแท็ก ความพยายามในการใช้คิวรี่สื่อจะสูญเปล่า และอุปกรณ์จะเข้าถึงวิวพอร์ตมาตรฐานไม่ถูกต้อง ข้อความค้นหาสื่อส่วนใหญ่ได้รับการออกแบบให้มีขนาด 500px หรือน้อยกว่า โดยปกติจะทำโดยใช้การสืบค้นสื่อที่มีความกว้างสูงสุดแบบธรรมดา หากไม่มีเมตาแท็ก คุณจะไม่ได้รับผลกระทบจากคำขอนี้ เนื่องจาก iPhone 4 จะยังคงแสดงไซต์เวอร์ชันกว้าง 980px ต่อไป ลองดูตัวอย่างด้านล่าง:

เนื้อความ ( พื้นหลัง: สีขาว; ) @หน้าจอสื่อ และ (ความกว้างขั้นต่ำ: 980px) /* เดสก์ท็อป */ ( เนื้อความ ( พื้นหลัง: สีแดง; ) ) หน้าจอ @media และ (ความกว้างสูงสุด: 979px) /* แท็บเล็ต */ ( เนื้อความ ( พื้นหลัง: สีน้ำเงิน; ) ) @หน้าจอสื่อ และ (ความกว้างสูงสุด: 500px) /* มือถือ */ ( เนื้อความ ( พื้นหลัง: สีเขียว; ) )

ด้านล่างนี้เป็นภาพหน้าจอสองภาพที่ถ่ายด้วย iPhone 4 ทั้งสองหน้ามี CSS ข้างต้น แต่หน้าหนึ่งใช้เมตาวิวพอร์ตแท็ก และอีกหน้าไม่มี

หน้าเว็บที่แสดงด้านบนไม่มีเมตาแท็ก ด้วยเหตุนี้ พื้นหลังจึงปรากฏเป็นสีแดงและจำลองวิวพอร์ตกว้างมาตรฐาน 980px แทนที่จะใช้แบบสอบถามสื่อบนมือถือ 500px

ในกรณีนี้ เมตาแท็กพร้อมใช้งานแล้ว และ iOS แสดงผลหน้าเว็บอย่างถูกต้องตามที่เราต้องการ โดยอิงตามความกว้าง 320px และอนุญาตให้คำสั่งสื่อของเราทำงานตามที่เราคาดหวัง

ทำไมต้องเลือกความกว้างของอุปกรณ์?

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

จากมุมมองของ CSS และ RWD ไซต์ที่ดีคือไซต์ที่ "ไม่เชื่อเรื่องอุปกรณ์" อย่างแท้จริง และไม่พยายามรองรับความกว้างของอุปกรณ์แต่ละชิ้น การกำหนดเป้าหมายเบรกพอยต์เฉพาะสำหรับ "ประเภท" ของอุปกรณ์ที่แตกต่างกัน (เช่น แท็บเล็ตหรือโทรศัพท์มือถือ) ทำได้โดยการเน้นไปที่วิธีการแสดงเนื้อหาที่ความกว้างของวิวพอร์ตเฉพาะ จากนั้นจึงทำการเปลี่ยนแปลงคิวรีสื่อตามนั้น ดังนั้นจึงไม่ใช่อุปกรณ์ที่กำหนดเบรกพอยต์ แต่กำหนดเค้าโครงและเนื้อหา และท้ายที่สุดสิ่งนี้สามารถนำไปสู่ผลลัพธ์ที่ดีที่สุด ทั้งจากมุมมองของคุณและจากมุมมองของผู้ใช้

นี่อาจเป็นเหตุผลว่าทำไมผู้คนจำนวนมากมีปัญหาในการสร้างการออกแบบที่ตอบสนองได้ และทำไมพวกเขาถึงบ่นว่ามันยาก แต่ถ้าพวกเขาพยายามออกแบบสำหรับอุปกรณ์แต่ละเครื่อง พวกเขากำลังต่อสู้กับการต่อสู้ที่พ่ายแพ้: จำนวนอุปกรณ์ที่ต้องคำนึงถึง (เพื่อให้ครอบคลุมทุกอย่าง) มีมากเกินไปและลดทุกอย่างให้เหลือเพียงโค้ดที่ไม่ถูกต้อง เป็นที่น่าสังเกตว่าหากคุณตัดสินใจใช้ความกว้างของอุปกรณ์ คุณต้องระบุกฎแยกต่างหากสำหรับการวางแนว (แนวตั้งหรือแนวนอน): ความกว้างของอุปกรณ์จะไม่เปลี่ยนแปลงเพียงเพราะคุณหมุนอุปกรณ์ตะแคง สิ่งนี้ต้องใช้โค้ดมากขึ้น ซึ่งหมายความว่าจะยิ่งปวดหัวมากขึ้นไปอีก

อย่างไรก็ตาม ลองดูตัวเลือกอื่นที่เป็นไปได้

แล้ว "ความกว้าง" ล่ะ?

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

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

สิ่งที่คุณต้องการสำหรับเพจแบบตอบสนองเต็มรูปแบบคือไซต์แบบตอบสนองและการสืบค้นสื่อที่ชาญฉลาดเพื่อกำหนดเป้าหมายช่วงมาตรฐานของมือถือ แท็บเล็ต เดสก์ท็อป + วิวพอร์ต ฉันชอบใช้ Media Queries ของ Foundation ซึ่งแม่นยำที่สุดและครอบคลุมวิวพอร์ตที่จำเป็นทั้งหมด

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

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

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

สรุปแล้ว

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

คำอธิบายแบบเต็มของเมตาแท็ก วิวพอร์ตและคุณลักษณะของมัน ตัวอย่าง หมายเหตุ และคำแนะนำในการปรับไซต์ให้เหมาะกับอุปกรณ์เคลื่อนที่ รวมถึงเมตาแท็กเพิ่มเติมและมีประโยชน์: มือถือที่เป็นมิตร, เพิ่มประสิทธิภาพบนมือถือและ รองรับแอปเปิ้ลมือถือบนเว็บแอป.

• เมตาแท็กวิวพอร์ต
  • แอตทริบิวต์เมตาแท็กของวิวพอร์ต
• เมตาแท็กเพิ่มเติมและมีประโยชน์
  • เมตาแท็ก HandheldFriendly
  • เมตาแท็ก MobileOptimized
  • เมตาแท็กรองรับ apple-mobile-web-app-capable
• ชุดเมตาแท็กที่แนะนำ

เมตาแท็กวิวพอร์ต

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

บันทึก: เมตาแท็ก มุมมองไม่ได้เป็นส่วนหนึ่งของมาตรฐานอย่างเป็นทางการและเป็นส่วนหนึ่งของข้อกำหนด การปรับอุปกรณ์ CSS(http://goo.gl/FSTGbn) แต่จนกว่าข้อกำหนดนี้จะได้รับการสรุปและนำไปใช้อย่างกว้างขวาง ขอแนะนำให้ใช้เมตาแท็ก วิวพอร์ตแยกจากกันและใช้ร่วมกับสไตล์ @วิวพอร์ตเพื่อวัตถุประสงค์ด้านความเข้ากันได้

ตัวอย่าง:

แอตทริบิวต์เมตาแท็กของวิวพอร์ต

เมตาแท็ก วิวพอร์ตอาจมีคุณลักษณะต่อไปนี้ คั่นด้วยเครื่องหมายจุลภาค (,):

ความกว้าง- ความกว้างของพื้นที่รับชม

ค่าแอตทริบิวต์เป็นจำนวนเต็มที่ไม่เป็นลบของ 200 ถึง 10000 พิกเซลหรือค่าคงที่ ความกว้างของอุปกรณ์ซึ่งกำหนดความกว้างของหน้าให้พอดีกับขนาดหน้าจอ

หากไม่ได้ระบุค่า ค่าเริ่มต้นจะตั้งเป็น - ในมือถือ Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px

บันทึก: สำหรับไซต์ที่มีการออกแบบแบบตอบสนอง ขอแนะนำให้ใช้: width=device-width

ความสูง- ความสูงของพื้นที่รับชม

ค่าแอตทริบิวต์เป็นจำนวนเต็มที่ไม่เป็นลบจาก 233 ถึง 10000 พิกเซลหรือค่าคงที่ ความสูงของอุปกรณ์ซึ่งกำหนดความสูงของหน้าให้พอดีกับขนาดหน้าจอ

บันทึก: หากมีการระบุแอตทริบิวต์ ความกว้างระบุแอตทริบิวต์ ความสูงไม่จำเป็น.

ระดับเริ่มต้น- ขนาดหน้าเริ่มต้น

0.1 ถึง 1.0 - ความหมาย 1.0 กำหนดขนาด 1:1 , เช่น. "อย่าปรับขนาด"

บันทึก: บนระบบปฏิบัติการบางระบบ (iOS, Windows Phone ฯลฯ)ความกว้างของหน้าเมื่อหมุนแล้วยังคงไม่เปลี่ยนแปลง แทนที่จะกระจายเนื้อหาซ้ำ เนื้อหาจะถูกปรับขนาด ดังนั้นจึงแนะนำให้ใช้: มาตราส่วนเริ่มต้น=1.0.

ผู้ใช้ปรับขนาดได้- ความพร้อมใช้งานของการปรับขนาดหน้าโดยผู้ใช้

ค่าแอตทริบิวต์เป็นบูลีน " ใช่"(1) - สามารถปรับขนาดได้หรือ" เลขที่"(0) - ไม่สามารถปรับขนาดได้

บันทึก: แนะนำให้ใช้ค่า " ใช่"และเพราะว่า มันถูกติดตั้งตามค่าเริ่มต้นแล้ว ผู้ใช้ปรับขนาดได้ไม่อาจระบุได้

ขนาดขั้นต่ำ- ขนาดพื้นที่การรับชมขั้นต่ำ

ค่าแอตทริบิวต์คือตัวเลขที่มีจุดจาก 0.1 ถึง 1.0 - ในเบราว์เซอร์มือถือ Safari ค่าเริ่มต้นคือ 0.25 ความหมาย 1.0 กำหนดขนาด 1:1 , เช่น. "อย่าปรับขนาด"

ขนาดสูงสุด- ขนาดวิวพอร์ตสูงสุด

ค่าแอตทริบิวต์คือตัวเลขที่มีจุดจาก 0.1 ถึง 1.0 - เบราว์เซอร์มือถือ Safari มีค่าเริ่มต้นเป็น 1.6 ความหมาย 1.0 กำหนดขนาด 1:1 , เช่น. "อย่าปรับขนาด"

บันทึก: หลีกเลี่ยงคุณสมบัติ ผู้ใช้ปรับขนาดได้, ขนาดขั้นต่ำและ ขนาดสูงสุด, เพราะ สิ่งเหล่านี้ส่งผลเสียต่อการเข้าถึงเนื้อหา

เมตาแท็กเพิ่มเติมและมีประโยชน์

เมตาแท็ก มือถือที่เป็นมิตรกำหนดว่าหน้าเว็บไซต์ได้รับการปรับให้เหมาะสมสำหรับอุปกรณ์มือถือบน Palm และ Blackberry ในเบราว์เซอร์เช่น AvantGo หรือไม่ ตอนนี้ได้รับการยอมรับจากเบราว์เซอร์มือถืออื่น ๆ มากมาย

ตัวอย่าง:

เมตาแท็ก เพิ่มประสิทธิภาพบนมือถือ(http://goo.gl/ZpLjZz) กำหนดความกว้างของวิวพอร์ตในเบราว์เซอร์มือถือ IE Mobile หรือ Pocket IE มีความคล้ายคลึงกับคุณลักษณะ ความกว้างในเมตาแท็ก วิวพอร์ต.

ตัวอย่าง:

เมตาแท็ก รองรับแอปเปิ้ลมือถือบนเว็บแอป(http://goo.gl/VGDYQC) อนุญาตให้เพจทำงานในโหมดเต็มหน้าจอ ซึ่งเกี่ยวข้องกับอุปกรณ์มือถือ Apple

ตัวอย่าง:

ชุดเมตาแท็กที่ฉันใช้สำหรับไซต์ที่มีการออกแบบที่ตอบสนองซึ่งปรับแต่งมาสำหรับอุปกรณ์มือถือ: