การอภิปรายเกี่ยวกับขนาดของเว็บไซต์ในเว็บไซต์หน้าจอสัมผัส HTML5

บทความนี้แบ่งออกเป็นสองส่วน ส่วนแรกกล่าวถึงความเป็นไปได้ของเว็บไซต์ข้ามแพลตฟอร์มและส่วนที่สองกล่าวถึงวิธีการตั้งค่า Viewport

มันเป็นความจริงที่ความกว้างและความสูงของฉลากสามารถปรับได้เราสามารถทำได้เร็วมาก แต่คุณจะพบว่าเว็บไซต์พีซีแบบดั้งเดิมหลายแห่งยังคงแก้ไขความกว้าง (Taobao ใช้ความกว้าง 1000px, Sohu 950px ... ) ทำไมเราไม่อนุญาตให้เว็บไซต์ปรับให้เข้ากับความกว้างและความสูง? นั่นเป็นเพราะถ้าเราปล่อยให้ความกว้างของฉลากถูกยืดออกไปโดยเบราว์เซอร์มันจะนำไปสู่ประสบการณ์ที่แย่มาก: คุณจะไม่ต้องการให้แถบซ้ายของคุณกลายเป็นก๋วยเตี๋ยวเมื่อเบราว์เซอร์ถูกปรับขนาดเป็น 100px; คุณไม่ต้องการให้เว็บไซต์ของคุณดูเหมือนเน็ตบุ๊กสำหรับนักเรียนระดับประถมศึกษาเมื่อเบราว์เซอร์มีการใช้งานมากเกินไป ดังนั้นจึง ไม่สมจริง ที่จะพึ่งพาการปรับฉลากเพื่อให้ได้ข้ามแพลตฟอร์มและเป็นค่าใช้จ่ายของประสบการณ์ผู้ใช้ หลายครั้งที่เราต้องแก้ไขความกว้างและความสูง

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

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

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

CSS Pixels: หน่วยนามธรรมที่ใช้โดยเบราว์เซอร์ส่วนใหญ่ใช้เพื่อวาดเนื้อหาบนหน้าเว็บ

พิกเซลของอุปกรณ์: แสดงหน่วยทางกายภาพขั้นต่ำของหน้าจอแต่ละ DP มีสีและความสว่างของตัวเอง

จำนวนพิกเซล CSS ที่มีค่าเทียบเท่าที่อยู่บนหน้าจอของโทรศัพท์ไม่ได้รับการแก้ไขมันขึ้นอยู่กับคุณลักษณะหลายอย่าง หลังจากการวิเคราะห์และสรุปเราสามารถสร้างสูตร: 1 CSS Pixels = (DevicePixelRatio)^2 พิกเซลอุปกรณ์ (^2 หมายถึงสี่เหลี่ยมจัตุรัสสำหรับสิ่งที่ DevicePixelRatio คือมันจะถูกอธิบายในภายหลัง)

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

ในทำนองเดียวกันการใช้ HTC G7 เป็นตัวอย่างความละเอียดของ 480*800 และ 3.7 นิ้วถูกคำนวณเป็น PPI ที่ 252

เราคำนวณ 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 จะถูกกำหนดไว้แล้วรูปภาพจะบัญชีเพียงหนึ่งในสี่ของหน้าจอ

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

ในโซลูชันนี้เราใช้ 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);}

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