บทความนี้แบ่งออกเป็นสองส่วน ส่วนแรกกล่าวถึงความเป็นไปได้ของเว็บไซต์ข้ามแพลตฟอร์มและส่วนที่สองกล่าวถึงวิธีการตั้งค่า Viewport
พัฒนาเว็บไซต์ข้ามแพลตฟอร์ม? พึ่งพาความกว้างและความสูงของแท็กมันได้รับความเป็นสากลในหลาย ๆ ขนาด! -มันเป็นความจริงที่ความกว้างและความสูงของฉลากสามารถปรับได้เราสามารถทำได้เร็วมาก แต่คุณจะพบว่าเว็บไซต์พีซีแบบดั้งเดิมหลายแห่งยังคงแก้ไขความกว้าง (Taobao ใช้ความกว้าง 1000px, Sohu 950px ... ) ทำไมเราไม่อนุญาตให้เว็บไซต์ปรับให้เข้ากับความกว้างและความสูง? นั่นเป็นเพราะถ้าเราปล่อยให้ความกว้างของฉลากถูกยืดออกไปโดยเบราว์เซอร์มันจะนำไปสู่ประสบการณ์ที่แย่มาก: คุณจะไม่ต้องการให้แถบซ้ายของคุณกลายเป็นก๋วยเตี๋ยวเมื่อเบราว์เซอร์ถูกปรับขนาดเป็น 100px; คุณไม่ต้องการให้เว็บไซต์ของคุณดูเหมือนเน็ตบุ๊กสำหรับนักเรียนระดับประถมศึกษาเมื่อเบราว์เซอร์มีการใช้งานมากเกินไป ดังนั้นจึง ไม่สมจริง ที่จะพึ่งพาการปรับฉลากเพื่อให้ได้ข้ามแพลตฟอร์มและเป็นค่าใช้จ่ายของประสบการณ์ผู้ใช้ หลายครั้งที่เราต้องแก้ไขความกว้างและความสูง
พึ่งพาการตรวจจับอุปกรณ์ HTML5/"> HTML5 เพื่อสร้างเว็บไซต์ตอบสนอง!เราพึ่งพาอุปกรณ์ HTML5 เพื่อตรวจสอบว่าอุปกรณ์ปัจจุบันเป็นโทรศัพท์มือถือหรือแท็บเล็ตและโหลด CSS ที่เกี่ยวข้องตามนั้น ตัวอย่างเช่น: หากคุณตรวจพบว่าอุปกรณ์ของคุณเป็นแท็บเล็ตฉันสามารถแสดงสามคอลัมน์ในแนวนอนและถ้าเป็นโทรศัพท์มือถือฉันจะแสดงเพียงคอลัมน์เดียวเท่านั้น ฟังดูไม่ยาก แต่มันซับซ้อนมากที่จะนำไปใช้ เราไม่เพียง แต่จำเป็นต้องพัฒนาเทมเพลตหลายชุดสำหรับอุปกรณ์ต่าง ๆ แต่ยังประมวลผลขนาดของภาพด้วย ในเรื่องนี้เราจะเห็นว่า Boston Globe ใช้ HTML5 เพื่อใช้การออกแบบที่ตอบสนองได้อย่างไร
โดยทั่วไปการบรรลุเว็บไซต์ข้ามแพลตฟอร์มนั้นมีราคาแพงเกินไปและถูก จำกัด สำหรับเว็บไซต์ส่วนใหญ่ ไม่ว่าจะเป็นไปได้หรือไม่นั้นขึ้นอยู่กับสถานการณ์จริงของเว็บไซต์
วิวพอร์ตและขนาดเว็บไซต์เบราว์เซอร์มือถือวางหน้าในหน้าต่างเสมือน (Viewport) โดยปกติแล้วหน้าต่างเสมือน (Viewport) นั้นกว้างกว่าหน้าจอเพื่อให้แต่ละหน้าเว็บไม่จำเป็นต้องบีบหน้าเว็บแต่ละหน้าลงในหน้าต่างเล็ก ๆ (ซึ่งจะทำลายเค้าโครงของหน้าเว็บที่ไม่ได้ปรับให้เหมาะสมสำหรับเบราว์เซอร์มือถือ) ผู้ใช้สามารถเห็นส่วนต่าง ๆ ของหน้าเว็บผ่านการแพนและซูม เบราว์เซอร์มือถือได้เปิดตัว Meta Tag ของ Viewport ช่วยให้นักพัฒนาเว็บสามารถควบคุมขนาดและการปรับขนาดของ Viewport
แนวคิดพื้นฐาน (1) พิกเซล CSS และพิกเซลอุปกรณ์CSS Pixels: หน่วยนามธรรมที่ใช้โดยเบราว์เซอร์ส่วนใหญ่ใช้เพื่อวาดเนื้อหาบนหน้าเว็บ
พิกเซลของอุปกรณ์: แสดงหน่วยทางกายภาพขั้นต่ำของหน้าจอแต่ละ DP มีสีและความสว่างของตัวเอง
จำนวนพิกเซล CSS ที่มีค่าเทียบเท่าที่อยู่บนหน้าจอของโทรศัพท์ไม่ได้รับการแก้ไขมันขึ้นอยู่กับคุณลักษณะหลายอย่าง หลังจากการวิเคราะห์และสรุปเราสามารถสร้างสูตร: 1 CSS Pixels = (DevicePixelRatio)^2 พิกเซลอุปกรณ์ (^2 หมายถึงสี่เหลี่ยมจัตุรัสสำหรับสิ่งที่ DevicePixelRatio คือมันจะถูกอธิบายในภายหลัง)
(2) PPI/DPIPPI บางครั้งเรียกว่า DPI แสดงถึงจำนวนพิกเซลต่อนิ้ว ค่าที่สูงขึ้นจอแสดงผลที่สูงขึ้นสามารถแสดงภาพได้ (หมายเหตุ: พิกเซลที่นี่อ้างถึงพิกเซลอุปกรณ์) หลังจากที่เราทราบว่า PPI หมายถึงอะไรเราสามารถเข้าใจวิธีการคำนวณของ PPI ได้อย่างง่ายดาย เราจำเป็นต้องคำนวณพิกเซลที่เทียบเท่ากับเส้นทแยงมุมของหน้าจอโทรศัพท์มือถือก่อนจากนั้นวางเส้นทแยงมุม (ขนาดของหน้าจอโทรศัพท์มือถือคือความยาวของเส้นทแยงมุมของหน้าจอโทรศัพท์มือถือ) และเราจะได้รับ PPI สำหรับการประกาศการคำนวณที่แม่นยำคุณสามารถอ้างถึงรูปด้านล่าง สิ่งที่น่าสนใจยิ่งกว่าคือ PPI ของ iPhone 4 ที่คำนวณตามสูตรคือ 330 ซึ่งสูงกว่า 326 อย่างเป็นทางการที่ Apple ประกาศอย่างเป็นทางการ
ในทำนองเดียวกันการใช้ HTC G7 เป็นตัวอย่างความละเอียดของ 480*800 และ 3.7 นิ้วถูกคำนวณเป็น PPI ที่ 252
(3) ความหนาแน่นกำหนดอัตราส่วนเราคำนวณ PPI เพื่อทราบว่าช่วงเวลาความหนาแน่นของอุปกรณ์โทรศัพท์มือถือเป็นของเนื่องจากช่วงเวลาความหนาแน่นที่แตกต่างกันสอดคล้องกับอัตราส่วนการปรับขนาดเริ่มต้นที่แตกต่างกันซึ่งเป็นแนวคิดที่สำคัญมาก
จากรูปด้านบนจะเห็นได้ว่าโทรศัพท์มือถือที่มี PPI ระหว่าง 120-160 จัดเป็นโทรศัพท์มือถือที่มีความหนาแน่นต่ำ 160-240 จัดเป็นความหนาแน่นปานกลาง 240-320 จัดเป็นความหนาแน่นสูงและสูงกว่า 320
ความหนาแน่นเหล่านี้สอดคล้องกับค่าการปรับขนาดเฉพาะ ใช้ iPhone 4 หรือ 4S ที่เราคุ้นเคยมากที่สุด PPI ของพวกเขาคือ 326 ซึ่งเป็นโทรศัพท์มือถือที่มีความหนาแน่นสูงเป็นพิเศษ เมื่อเราเขียนหน้าด้วยความกว้าง 320px และวางลงบน iPhone เพื่อแสดงคุณจะพบว่ามันมีความกว้างเต็ม นี่เป็นเพราะหน้าถูกขยายสองครั้งโดยค่าเริ่มต้นนั่นคือ 640px ในขณะที่ความกว้างของ iPhone 4 หรือ 4S คือ 640px
ภาพวงกลมประเภทความหนาแน่นสูงเนื่องจากนี่เป็นข้อมูลทางสถิติของโทรศัพท์ Android ในตลาดโทรศัพท์ Android ในประเทศอุปกรณ์ที่มีความหนาแน่นสูงนั้นมีส่วนแบ่งการตลาดส่วนใหญ่ นี่เป็นจุดที่สำคัญมากและเป็นจุดสำคัญที่เราควรให้ความสนใจเมื่อทำ Android Webapps
การใช้วิวพอร์ตViewport มีแอตทริบิวต์ทั้งหมด 5 รายการดังนี้:
<meta name = "viewport"
เนื้อหา = "
ความสูง = [pixel_value | ความสูงของอุปกรณ์]
Width = [Pixel_value | ความกว้างของอุปกรณ์]
ระดับเริ่มต้น = float_value, ระดับต่ำสุด = float_value, ระดับสูงสุด = float_value, ระดับสูงสุด = float_value,
ผู้ใช้สามารถลดขนาดได้ = [ใช่ | เลขที่] ,
เป้าหมาย- DensityDpi = [DPI_VALUE | Device-DPI | High-DPI | Medium-DPI | ต่ำ dpi] " />
ในบรรดาคุณสมบัติเหล่านี้เรามุ่งเน้นไปที่ ความหนาแน่นของเป้าหมาย ซึ่งสามารถเปลี่ยนการปรับขนาดเริ่มต้นของอุปกรณ์ Medium-DPI เป็นค่าเริ่มต้นของความหนาแน่นของเป้าหมาย หากเรากำหนดเป้าหมายความหนาแน่นของเป้าหมาย = device-dpi อุปกรณ์จะแสดงหน้าตาม DPI จริง ตัวอย่างเช่นหากมีการวางรูปภาพ 320*480 ใน iPhone 4 มันจะครอบครองหน้าจอตามค่าเริ่มต้น แต่ถ้ากำหนดความหนาแน่นของเป้าหมาย = DVICE-DPI จะถูกกำหนดไว้แล้วรูปภาพจะบัญชีเพียงหนึ่งในสี่ของหน้าจอ
สารละลาย (1) เรียบง่ายและหยาบหากเราสร้างหน้าตามร่างการออกแบบที่กว้าง 320px และไม่ได้ทำการตั้งค่าใด ๆ หน้าจะปรับขนาดให้เป็นความกว้างโดยอัตโนมัติเท่ากับหน้าจอโทรศัพท์มือถือโดยค่าเริ่มต้น (นี่เป็นเพราะกลาง DPI เป็นค่าเริ่มต้นของความหนาแน่นของเป้าหมายและจะถูกกำหนดโดยอัตราส่วนการปรับขนาดที่แตกต่างกัน ดังนั้นการแก้ปัญหานี้ง่ายหยาบและมีประสิทธิภาพ แต่มีข้อเสียร้ายแรง สำหรับอุปกรณ์มือถือที่มีความหนาแน่นสูงและมีความหนาแน่นสูงเป็นพิเศษหน้า (โดยเฉพาะรูปภาพ) จะบิดเบือนและยิ่งมีความหนาแน่นมากเท่าไหร่ก็ยิ่งบิดเบี้ยวมากขึ้นเท่านั้น
(2) สมบูรณ์แบบมากในโซลูชันนี้เราใช้ Target-DensityDPI = device-DPI เพื่อให้อุปกรณ์โทรศัพท์มือถือจะแสดงผลตามจำนวนพิกเซลที่แท้จริง ในแง่ของมืออาชีพมันคือ 1 CSS Pixels = 1 พิกเซลอุปกรณ์ ตัวอย่างเช่นสำหรับ iPhone ที่มี 640*960 เราสามารถสร้างหน้าด้วย 640*960 และจะไม่มีแถบเลื่อนเมื่อแสดงบน iPhone แน่นอนสำหรับอุปกรณ์อื่น ๆ ต้องจำเป็นต้องใช้หน้าขนาดที่แตกต่างกันดังนั้นโซลูชันนี้มักจะใช้ในการใช้การสืบค้นสื่อเพื่อสร้างหน้าตอบสนอง โซลูชันนี้สามารถนำเสนอได้อย่างสมบูรณ์แบบที่ความละเอียดเฉพาะ แต่มีความละเอียดที่แตกต่างกันมากขึ้นเพื่อให้เข้ากันได้มากขึ้นค่าใช้จ่ายที่สูงขึ้นเนื่องจากจำเป็นต้องใช้รหัสแยกต่างหากสำหรับแต่ละความละเอียด นี่คือตัวอย่างง่ายๆ:
<meta name = "viewport" content = "target- densitydpi = device-dpi, width = device-width" /> >>
#เฮดเดอร์ {
ความเป็นมา: URL (ความหนาแน่นปานกลาง-image.png);
-
หน้าจอ @media และ (-webkit -device-pixel-ratio: 1.5) {
/ * CSS สำหรับหน้าจอที่มีความหนาแน่นสูง *//
#header {พื้นหลัง: url (ความหนาแน่นสูง-image.png);}
-
หน้าจอ @media และ (-webkit -device-pixel-ratio: 0.75) {
/ * CSS สำหรับหน้าจอที่มีความหนาแน่นต่ำ *//
#header {พื้นหลัง: url (ความหนาแน่นต่ำ-image.png);}
(3) ส่วนลดที่สมเหตุสมผลสำหรับอุปกรณ์ Android ส่วนใหญ่ลักษณะของความหนาแน่นสูงและความหนาแน่นปานกลางเราสามารถนำโซลูชันการประนีประนอมมาใช้: เรากู้คืนร่างการออกแบบที่กว้าง 480px แต่ระบบหน้านั้นมีความกว้าง 320px (ใช้พื้นหลังเพื่อลดภาพ) ด้วยวิธีนี้โทรศัพท์ที่มีความหนาแน่นต่ำมีแถบเลื่อน (โดยทั่วไปไม่มีใครใช้โทรศัพท์ชนิดนี้) โทรศัพท์ที่มีความหนาแน่นปานกลางจะเสียการจราจรเล็กน้อยโทรศัพท์ที่มีความหนาแน่นสูงจะมีอยู่อย่างสมบูรณ์แบบและโทรศัพท์ Android ที่มีความหนาแน่นสูงเป็นพิเศษเล็กน้อย ข้อดีของโซลูชันนี้ชัดเจนมาก: ต้องการร่างการออกแบบเพียงชุดเดียวและจำเป็นต้องมีรหัสหนึ่งชุดเท่านั้น (นี่คือการพูดคุยถึงสถานการณ์ของโทรศัพท์ Android เท่านั้น)