หลักการพื้นฐานและวิธีการใช้โดยละเอียดของ Viewport

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

เป็นประจำหากหน้าสามารถปรับขนาดได้ให้ใช้รหัสต่อไปนี้

<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1 />

หากคุณไม่ต้องการซูมเข้าใช้รหัสต่อไปนี้

<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับต่ำสุด = 1.0, ระดับสูงสุด = 1.0, ผู้ใช้สามารถลดขนาดได้ = no>

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

พิกเซลทางกายภาพ/พิกเซลอิสระ = devicePixelRatio

เราสามารถซูมในเบราว์เซอร์และหน้าต่างพิมพ์ DEVICEPIXELRATIO ในคอนโซลเพื่อดูขนาดของ DevicePixelRatio พิกเซลอิสระในนั้นสามารถเข้าใจได้ว่าเป็น PX ใน CSS

รหัส:

<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, ระดับสูงสุด = 1>

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

1. ความกว้างและระดับเริ่มต้น

เมื่อตั้งค่าความกว้างและระดับเริ่มต้นเบราว์เซอร์จะเลือกค่าที่ใหญ่ที่สุดสำหรับการปรับตัวโดยอัตโนมัติ สินทรัพย์:

<meta name = viewport content = width = 400, ระดับเริ่มต้น = 1>

เบราว์เซอร์จะเลือกค่าขนาดใหญ่ที่จะปรับตัว หากความกว้างของมุมมองในอุดมคติของหน้าต่างปัจจุบันคือ 300 และค่าเริ่มต้นคือ 1 ค่าของความกว้างคือ 400 จะได้รับ; หากวิวทิวทัศน์ที่เหมาะสมที่สุดของหน้าต่างปัจจุบันคือ 480 จะเลือก 480

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

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

2. การเปลี่ยนแปลงแอตทริบิวต์แบบไดนามิก

. document.write ()

document.write ('<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1>')

B.SetAttribute

var mvp = document.getElementById ('testViewport');

mvp.setAttribute ('เนื้อหา', 'width = 480');

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

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

พิกเซลทางกายภาพ/พิกเซลอิสระ = devicePixelRatio

เราสามารถซูมในเบราว์เซอร์และหน้าต่างพิมพ์ DEVICEPIXELRATIO ในคอนโซลเพื่อดูขนาดของ DevicePixelRatio พิกเซลอิสระในนั้นสามารถเข้าใจได้ว่าเป็น PX ใน CSS

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

<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, ระดับสูงสุด = 1>

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

1. ความกว้างและระดับเริ่มต้น

เมื่อตั้งค่าความกว้างและระดับเริ่มต้นเบราว์เซอร์จะเลือกค่าที่ใหญ่ที่สุดสำหรับการปรับตัวโดยอัตโนมัติ สินทรัพย์:

<meta name = viewport content = width = 400, ระดับเริ่มต้น = 1>

เบราว์เซอร์จะเลือกค่าขนาดใหญ่ที่จะปรับตัว หากความกว้างของมุมมองในอุดมคติของหน้าต่างปัจจุบันคือ 300 และค่าเริ่มต้นคือ 1 ค่าของความกว้างคือ 400 จะได้รับ; หากวิวทิวทัศน์ที่เหมาะสมที่สุดของหน้าต่างปัจจุบันคือ 480 จะเลือก 480

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

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

2. การเปลี่ยนแปลงแอตทริบิวต์แบบไดนามิก

. document.write ()

document.write ('<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1>')

B.SetAttribute

var mvp = document.getElementById ('testViewport');

mvp.setAttribute ('เนื้อหา', 'width = 480');

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