วิวพอร์ตคืออะไร
เบราว์เซอร์มือถือวางหน้าในหน้าต่างเสมือน (Viewport) โดยปกติแล้วหน้าต่างเสมือน (Viewport) นั้นกว้างกว่าหน้าจอเพื่อให้แต่ละหน้าเว็บไม่จำเป็นต้องบีบหน้าเว็บแต่ละหน้าลงในหน้าต่างเล็ก ๆ (ซึ่งจะทำลายเค้าโครงของหน้าเว็บที่ไม่ได้ปรับให้เหมาะสมสำหรับเบราว์เซอร์มือถือ) ผู้ใช้สามารถเห็นส่วนต่าง ๆ ของหน้าเว็บผ่านการแพนและซูม เบราว์เซอร์ Safari รุ่นมือถือได้เปิดตัว Meta Tag of Viewport ซึ่งช่วยให้นักพัฒนาเว็บสามารถควบคุมขนาดและซูมของ Viewport และเบราว์เซอร์มือถืออื่น ๆ ก็รองรับ
พื้นฐานวิวพอร์ต
แท็ก Meta Viewport ของหน้าเว็บที่ใช้กันทั่วไปที่ได้รับการปรับให้เหมาะสมสำหรับหน้าเว็บมือถือมีดังนี้:
<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, ระดับสูงสุด = 1″>
ความกว้าง: ควบคุมขนาดของวิวพอร์ตซึ่งสามารถระบุได้หาก 600 หรือค่าพิเศษเช่นความกว้างของอุปกรณ์คือความกว้างของอุปกรณ์ (หน่วยของพิกเซลของ CSS เมื่อปรับสัดส่วนถึง 100%
ความสูง: สอดคล้องกับความกว้างระบุความสูง
ระดับเริ่มต้น: การปรับขนาดเริ่มต้นนั่นคืออัตราส่วนการปรับสเกลเมื่อโหลดหน้าเป็นครั้งแรก
ระดับสูงสุด: สเกลสูงสุดที่ช่วยให้ผู้ใช้สามารถปรับขนาดได้
ระดับต่ำสุด: สเกลขั้นต่ำที่อนุญาตให้ผู้ใช้สามารถปรับขนาดได้
ผู้ใช้สามารถปรับขนาดได้: ผู้ใช้สามารถปรับขนาดได้ด้วยตนเอง
คำถามบางอย่างเกี่ยวกับวิวพอร์ต
Viewport ไม่ได้เป็นเพียงคุณลักษณะที่ไม่เหมือนใครบน iOS แต่ยังเป็นวิวพอร์ตบน Android และ Winphone ปัญหาที่พวกเขาต้องการแก้ไขนั้นเหมือนกันนั่นคือไม่สนใจความละเอียดที่แท้จริงของอุปกรณ์และโดยตรงผ่าน DPI รีเซ็ตความละเอียดระหว่างขนาดทางกายภาพและเบราว์เซอร์ซึ่งไม่มีส่วนเกี่ยวข้องกับความละเอียดของอุปกรณ์ ตัวอย่างเช่นคุณสามารถรับ iPhone3 GS ที่มี 3.5 นิ้ว -320 * 480, iPhone4 ที่มี 3.5 นิ้ว-640 * 960, iPhone4 ที่มี 9.7-inch-1024 * 768 และ iPad2 ที่มีความละเอียดและขนาดกายภาพที่แตกต่างกัน ตัวอย่างเช่นเว็บไซต์ของคุณกว้าง 800px คุณสามารถตั้งค่าความกว้าง = 800 ของ Viewport เพื่อให้เว็บไซต์ของคุณแสดงเว็บไซต์ของคุณบนอุปกรณ์ที่แตกต่างกันทั้งสามนี้เพียงแค่เต็มหน้าจอ
ฉันเชื่อว่านักเรียนทุกคนที่มีความเข้าใจเล็กน้อยเกี่ยวกับวิวพอร์ตควรเข้าใจความรู้ข้างต้นแล้ว นี่ไม่ใช่ประเด็นที่ฉันอยากจะพูดถึงวันนี้ สิ่งที่ฉันต้องการแสดงคือความแตกต่างบางอย่างในการแสดงวิวพอร์ตบน iOS และ Android
เมื่อค้นหาความรู้ออนไลน์เกี่ยวกับ Viewport โดยทั่วไปแล้วข้อมูลทั้งหมดต่อไปนี้:
<meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับสูงสุด = 1.0, ระดับต่ำสุด = 1.0, scalable user-scalable = no />
รหัสนี้หมายความว่าความกว้างของวิวพอร์ตเท่ากับความละเอียดจริงบนอุปกรณ์จริงและไม่อนุญาตให้ผู้ใช้มาตราส่วน นี่คือวิธีการตั้งค่าเว็บแอปกระแสหลักใน Yidu ฟังก์ชั่นของมันคือการละทิ้งวิวพอร์ตและไม่ขยายหน้า ด้วยวิธีนี้ DPI จะต้องเหมือนกับความละเอียดที่แท้จริงบนอุปกรณ์ โดยไม่มีการปรับขนาดหน้าเว็บจะปรากฏขึ้นและละเอียดอ่อนมากขึ้น นักเรียนที่เล่น PS ควรรู้ว่ามันจะกลายเป็นอะไรเมื่อคุณซูมภาพ 1,000 * 1,000 โดยตรงถึง 500 * 500 คะแนนใช่ไหม? การบิดเบือนของภาพจะต้องไม่ถูกหลบหนี
แต่แอปพลิเคชันที่ฉันต้องการทำนั้นตรงกันข้ามและจำเป็นต้องใช้วิวพอร์ตและซูม ไม่ว่าความละเอียดที่แท้จริงคืออะไรหรือขนาดทางกายภาพคืออะไรฉันหวังว่าจะมีความละเอียดแบบครบวงจรในเบราว์เซอร์และผู้ใช้จะไม่ได้รับอนุญาตให้ซูม อุปกรณ์ที่ฉันใช้ในการทดสอบคือ: iPhone4, iPad2, HTC G11, โทรศัพท์ตู้น้ำ (ระบบ Android), Asus Android Pad, Dell Winphone และฉันพบปัญหาต่อไปนี้ตลอดทาง:
1) หากมีการตั้งค่าวิวพอร์ตโดยไม่มีการแสดงผลความกว้างเริ่มต้นคือ 980 ถ้าองค์ประกอบทั้งหมดของหน้าน้อยกว่า 980 ความกว้างคือ 980 ถ้าความกว้างของหน้าเกิน 980 ความกว้างจะเท่ากับความกว้างสูงสุด ในระยะสั้นสามารถแสดงหน้าทั้งหมดจากซ้ายไปขวาโดยค่าเริ่มต้น หากคุณตั้งค่า Viewport เพียงแค่ตั้งค่าผู้ใช้-scalable = ไม่ตัวอย่างเช่น <meta name = viewport content = user-scalable = no /> ความกว้างภายใต้ iOS จะยังคงแสดงที่ 980 (นั่นคือมันจะถูกปรับขนาดโดย DPI โดยค่าเริ่มต้น)
2) สำหรับอุปกรณ์ iOS ความกว้างการตั้งค่าอาจมีผล แต่สำหรับ Android ความกว้างการตั้งค่าจะไม่มีผล อัตราส่วนการปรับสเกลของ DPI จะถูกคำนวณโดยอัตโนมัติโดยความกว้างที่คุณตั้งค่าและความละเอียดจริงที่คุณตั้งไว้ อย่างไรก็ตามใน Android คุณตั้งค่าความกว้างไม่ถูกต้อง สิ่งที่คุณสามารถตั้งค่าได้คือความหนาแน่นของเป้าหมายสนามพิเศษนั่นคือมีสามตัวแปร: ความกว้างของเบราว์เซอร์ความกว้างจริงของอุปกรณ์และ DPI ลองใช้สูตรเพื่อแสดงความสัมพันธ์ระหว่างพวกเขา (ไม่ใช่ความสัมพันธ์ที่แท้จริงเพียงแค่ใช้มันสำหรับคำอธิบายสั้น ๆ ) อุปกรณ์ความกว้างจริง * dpi = ความกว้างของเบราว์เซอร์ที่นี่ตัวแปรทั้งสามตัวแปรความกว้างจริงของอุปกรณ์เป็นค่าที่ทราบว่าเราไม่สามารถใช้งานได้ ใน iOS สิ่งที่เราสามารถเปลี่ยนแปลงได้คือความกว้างของเบราว์เซอร์ DPI จะถูกสร้างขึ้นโดยอัตโนมัติและใน Android สิ่งที่เราสามารถเปลี่ยนแปลงได้คือ DPI และความกว้างของเบราว์เซอร์จะถูกสร้างขึ้นโดยอัตโนมัติ สำหรับ Android ไม่ว่าเราจะตั้งค่าความกว้างอย่างไรก็จะไม่มีผลกระทบต่อความกว้างของเบราว์เซอร์
PS: ที่นี่ฉันจะพูดถึงปัญหาแปลก ๆ อีกประการหนึ่ง: ใน G11 ของ HTC (ฉันมีเพียงโทรศัพท์นี้สำหรับโทรศัพท์ของ HTC และไม่มีการทดสอบอื่น ๆ ) หาก DPI ถูกตั้งค่าโดยไม่แสดงความกว้างผู้ใช้สามารถลดขนาดได้ = ไม่ไม่มีผลนั่นคือ: <Meta Name = Viewport Content = Target-DensityDpi = 300 เราจำเป็นต้องตั้งค่าความกว้างอย่างต่อเนื่อง แม้ว่าค่านี้จะไม่มีผลกระทบใด ๆ ต่อความละเอียดของหน้าจอเบราว์เซอร์ภายใต้ Android (มันจะยังคงมีผลกระทบต่อ iOS) เรายังคงต้องตั้งค่าและค่านี้จะต้องมากกว่า 320 หากน้อยกว่าหรือเท่ากับ 320 ปัญหานี้จะปรากฏบนโทรศัพท์ G11 ของ HTC เท่านั้นและไม่มีปัญหาดังกล่าวในโทรศัพท์ Aquos เข้ากันได้กับ Android เป็นอาการปวดหัว @_ @ ฉันไม่รู้ว่าจะมีข้อผิดพลาดจำนวนเท่าใดในอนาคต บน Winphone ผลลัพธ์นั้นแปลกยิ่งกว่า: ฉันตั้งค่ามากกว่า 480 สำหรับความกว้างของ Viewport และผู้ใช้สามารถลดขนาดได้ = NO จะล้มเหลว หากค่าน้อยกว่า 480, ผู้ใช้สามารถลดขนาดได้ = ไม่มีจะมีผล แต่ไม่ว่าฉันจะตั้งค่าความกว้างของวิวพอร์ตเท่าไหร่มันก็ไม่มีผลต่อความกว้างจริงที่แสดงโดย Winphone และไม่มีผลกระทบผ่านความหนาแน่นของเป้าหมาย ตั้งค่าความกว้างหากน้อยกว่า 480 หน้าจอจะซูมออก แต่ขนาดของการลดลงนั้นแตกต่างอย่างสิ้นเชิงจากที่ฉันคาดไว้ ฉันไม่รู้ว่ามันถูกซูมกฎอะไรฉันไม่รู้ว่านี่เป็นปัญหากับ winphone หรือปัญหาเกี่ยวกับการใช้งาน Dell หรือไม่
3) บทความนี้ควรเกี่ยวข้องโดยตรงกับบทความก่อนหน้า: เมื่ออุปกรณ์ iOS เป็นแนวนอนและแนวตั้งมันจะปรับ DPI โดยอัตโนมัติ ไม่ว่าจะเป็นแนวนอนหรือแนวตั้งก็สามารถมั่นใจได้ว่าความกว้างของเบราว์เซอร์เท่ากับค่าที่ตั้งไว้ใน Viewport ดังนั้นเมื่อหน้าจอแนวนอนและแนวตั้งเป็นหน้าจอแนวนอนและแนวตั้งขนาดของเนื้อหาที่แสดงบนหน้าจะปรับขนาดและเปลี่ยนแปลงโดยอัตโนมัติ เมื่อโทรศัพท์ Android เป็นหน้าจอแนวนอนและแนวตั้ง DPI จะไม่เปลี่ยนแปลงและเมื่อหน้าจอแนวนอนและแนวตั้งเว็บเพจจะไม่ถูกซูม ด้วยเหตุนี้ iOS จึงสามารถมั่นใจได้ว่าไม่มีแถบเลื่อนที่ถูกสร้างขึ้นในหน้าแนวนอนและแนวตั้งและหน้าจอเต็มรูปแบบจะปรากฏขึ้น แต่ Android ไม่สามารถรับประกันได้ หากหน้าจอแนวนอนและแนวตั้งไม่ได้รับอนุญาตให้เต็มและในทางกลับกัน
4) สำหรับอุปกรณ์ iOS หากการแสดงความกว้างถูกกำหนดและตำแหน่งที่กว้างที่สุดของหน้าเกินความกว้างความกว้างจะไม่ถูกต้องและจะยังคงแสดงที่ความกว้างที่กว้างที่สุด (จะไม่มีแถบเลื่อน) แต่ปัญหาที่แปลกมากจะเกิดขึ้นในเวลานี้ หลังจากที่คุณสลับหน้าจอแนวนอนและแนวตั้งของโทรศัพท์ของคุณหลายครั้งคุณจะพบว่าหน้าของคุณขยายโดยอัตโนมัติและแถบเลื่อนจะปรากฏขึ้น แต่ที่จริงแล้วความกว้างขยายไม่มีส่วนเกี่ยวข้องกับความกว้างที่คุณตั้งไว้ เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้นคุณต้องตั้งค่าความกว้างของความกว้างให้ใหญ่กว่าส่วนที่กว้างที่สุดของหน้าหรือเดียวกัน