จะใช้เมตาแท็กของวิวพอร์ตสำหรับการออกแบบเว็บที่ตอบสนองใน HTML ได้อย่างไร

บล็อกนี้จะอธิบายวิธีใช้เมตาแท็กวิวพอร์ตสำหรับการออกแบบเว็บที่ตอบสนองใน HTML:

• เมตาแท็กของวิวพอร์ตคืออะไร
• แอตทริบิวต์ต่างๆ ของ Meta Tag

เมตาแท็กของวิวพอร์ตคืออะไร

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

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

เมตาแท็กวิวพอร์ตมีแอตทริบิวต์ต่อไปนี้ที่สามารถวางเป็นค่าสำหรับ ' เนื้อหา ' คุณลักษณะ:

แอตทริบิวต์ 'ความกว้าง'

“ ความกว้าง แอตทริบิวต์ ” ระบุพื้นที่ที่มองเห็นได้ของหน้าเว็บสำหรับเนื้อหาในแนวตั้ง เมตาแท็กมีลักษณะดังนี้:

คุณสมบัติ 'ส่วนสูง'

“ ความสูง แอตทริบิวต์ ” กำหนดความยาวแนวตั้งของหน้าเว็บเพื่อให้แน่ใจว่าความสูงของวิวพอร์ตตรงกับความสูงของหน้าจอ เมตาแท็กมีลักษณะดังนี้:

แอตทริบิวต์ 'ขนาดเริ่มต้น'

“ ระดับเริ่มต้น แอตทริบิวต์ ” ช่วยให้มั่นใจได้ว่าหน้าเว็บจะแสดงในระดับการซูมที่เหมาะสมเมื่อโหลดครั้งแรก ตัวอย่างเช่น ไปที่รหัสด้านล่าง:

แอตทริบิวต์ 'ขนาดสูงสุด'

“ ระดับสูงสุด แอตทริบิวต์ ” ระบุระดับการซูมสูงสุดสำหรับหน้าเว็บเพื่อป้องกันปัญหาเค้าโครง:

แอตทริบิวต์ 'ขนาดขั้นต่ำ'

“ สเกลขั้นต่ำ ” ใช้เพื่อจำกัดไม่ให้ผู้ใช้ซูมออกมากเกินไปโดยระบุระดับมาตราส่วนการซูมออกขั้นต่ำ:

แอตทริบิวต์ 'ผู้ใช้ปรับขนาดได้'

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

จะใช้เมตาแท็กของวิวพอร์ตสำหรับการออกแบบเว็บที่ตอบสนองใน HTML ได้อย่างไร

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

สมมติว่าภายใน “