สวัสดีผู้เยี่ยมชมทั่วไปและผู้อ่านประจำของบล็อก!

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

โครงร่างโดยย่อของบทความ:

ในบทความที่แล้ว ฉันได้เขียนไปแล้วว่าทำไมมันถึงจำเป็น แต่จะบรรลุความสามารถในการปรับตัวนี้ได้อย่างไร?

สำหรับสิ่งนี้มี วิธีทางที่แตกต่าง. บางคนใช้จาวาสคริปต์ บางคนใช้อย่างอื่น แต่ฉันคิดว่าสิ่งที่ง่ายที่สุดและ ทางที่ถูกเป็นการปรับตัว โดยใช้ CSS.

วิธีสร้างเค้าโครงเว็บไซต์ที่ตอบสนอง

ประการแรก หากคุณรับหน้าที่ออกแบบเว็บไซต์แบบปรับเปลี่ยนได้ระหว่างแท็ก วางรหัสต่อไปนี้:

ช่างเป็นอะไรที่โง่เขลาที่ฉันไม่ได้ทำทันทีเมื่อฉันพยายามสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้ของเว็บไซต์ !!!
ปัญหาของเบราว์เซอร์มือถือคือการปรับขนาดเลย์เอาต์ของไซต์ แม้กระทั่งแบบปรับได้

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

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

แต่มันเป็นไปไม่ได้!

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

เพราะความโง่เขลาและไร้ความสามารถของฉัน ฉันเสียเวลาไปมาก แต่ตอนนี้ฉันจำได้ตลอดไป)))

แบบสอบถามสื่อ CSS ที่ตอบสนอง

เพื่อให้ตอบสนองกับ CSS คุณต้องใช้คำสั่งสื่อ

เป็นอย่างไรบ้าง? ใช่ง่ายมาก ในไฟล์ CSS คุณต้องเขียนคำสั่งเช่น:

หน้าจอ @media และ (ความกว้างต่ำสุด: 1440px) และ (ความกว้างสูงสุด: 1599px)( )

รหัสนี้หมายความว่าลักษณะที่อยู่ระหว่าง "( ) " จะใช้ได้กับหน้าจอที่มีความกว้างขั้นต่ำ 1440px และสูงสุด 1599px

นั่นคือ รูปแบบขององค์ประกอบไซต์ที่ควรปรับเปลี่ยนตามความละเอียดหน้าจอควรเขียนแยกกันสำหรับแต่ละความกว้างของหน้าจอที่เป็นไปได้

ความละเอียดหน้าจอที่สำคัญที่สุดสำหรับเค้าโครงที่ปรับเปลี่ยนตามอุปกรณ์

• 320px- อุปกรณ์มือถือ (แนวตั้ง);
• 480px- อุปกรณ์มือถือ (แนวนอน);
• 600px- เม็ดเล็ก
• 768px- แท็บเล็ต (แนวตั้ง);
• 1024px- แท็บเล็ต (แนวนอน) / เน็ตบุ๊ก;
• 1280px ขึ้นไป- พีซี

สิทธิ์เหล่านี้คือสิ่งที่คุณต้องให้ความสำคัญและให้ความสำคัญเป็นพิเศษในรูปแบบที่ปรับเปลี่ยนได้ ความละเอียดหน้าจอเหล่านี้เป็นประเภทที่พบได้บ่อยที่สุด

การออกแบบที่ตอบสนองต่อ bootstrap

สะดวกมากที่จะใช้ bootstrap เพื่อสร้างโครงร่างแบบปรับได้ ความสะดวกสบายคือรูปแบบทั้งหมดสำหรับการปรับบล็อก ปุ่ม ตาราง ฯลฯ ลงทะเบียนแล้วใน bootstpap คุณเพียงแค่ต้องหาว่าคลาสใดที่จะกำหนดให้กับองค์ประกอบใด

ในการเริ่มต้น ให้ดาวน์โหลด bootstrap เวอร์ชันล่าสุดและเชื่อมต่อกับไซต์ของคุณ โปรดทราบว่าการเชื่อมรูปแบบและสคริปต์กับเวิร์ดเพรสนั้นมีลักษณะเฉพาะของมันเอง

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

ตัวอย่างเช่น การออกแบบนี้จะอนุญาตให้บล็อกกว้างหนึ่งบล็อกสำหรับเนื้อหาที่มีความกว้าง 8 ส่วน และบล็อกหนึ่งแคบสำหรับแถบด้านข้างที่มีความกว้าง 4 ส่วนของหน้าจอ:

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

คุณยังสามารถปรับการเยื้องของบล็อกจากขอบได้อีกตามจำนวนส่วนที่ต้องการ ตัวอย่างเช่น การก่อสร้างนี้:

สิ่งนี้จะสร้างบล็อกที่มีความกว้าง 10 ส่วน โดยเยื้องจากด้านซ้ายไป 1 ส่วนของหน้าจอ

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

ในอนาคตฉันวางแผนที่จะโพสต์บทช่วยสอนเกี่ยวกับการทำงานกับ bootsrap ดังนั้นฉันแนะนำให้คุณอย่าพลาดช่วงเวลานี้

การตรวจสอบการตอบสนองของเว็บไซต์

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

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

คุณชอบบทความอย่างไร ชัดเจนทั้งหมด? ถ้าไม่เขียนความคิดเห็นเราจะคิดออกด้วยกัน

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

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

ความละเอียดหน้าจอคืออะไร?

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

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

บน ช่วงเวลานี้ 99 เปอร์เซ็นต์ของสมาร์ทโฟนมีหน้าจอสามประเภท

• เอชดี (1280x 720, 720p);
• ฟูลเอชดี (1920×1080, 1080p);
• ควอดเอชดี (2560×1440, 1440p)

ฉันควรเลือกความละเอียดหน้าจอใด

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

อุปกรณ์ที่ทรงพลังกว่านั้นมาพร้อมกับจอแสดงผลที่มีความละเอียดสูงกว่า สมาร์ทโฟนที่มีหน้าจอ 1920 x 1080 ปรากฏขึ้นเมื่อนานมาแล้วและไม่ทำให้ใครแปลกใจอีกต่อไป หากเส้นทแยงมุมของสมาร์ทโฟนอยู่ระหว่าง 4.5 ถึง 5.5 นิ้ว หน้าจอขนาด 1920 × 1080 พิกเซล (Full HD) จะดีที่สุด ที่ความละเอียดต่ำ ภาพจะมองเห็นพิกเซลได้ และผู้ใช้อาจรู้สึกไม่สบาย บางทีนี่อาจเป็นค่าเฉลี่ยสีทอง - ราคาถูก ภาพมีความชัดเจนและสว่าง

ด้วยเส้นทแยงมุมมากกว่า 5.5 นิ้วขึ้นไป อุปกรณ์เรือธงจะใช้ความละเอียด Quad HD (2650 × 1440) คุณภาพของภาพที่นี่อยู่ในระดับสูง แต่ถ้าคุณเชื่อ สายตามนุษย์แทบจะไม่สามารถสังเกตเห็นความแตกต่างที่มีนัยสำคัญได้เลย Quad HD เป็นคุณสมบัติของอนาคตและจำเป็นสำหรับเทคโนโลยีความจริงเสริมและความจริงเสมือน

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

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

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

เรากำลังพูดถึงอุปกรณ์บน Android และ iOS WP ยังคงแปลกใหม่ และไม่มีประสบการณ์ส่วนตัว ฉันจะไม่ดำเนินการให้คำแนะนำ

ถ้าใน เอกสาร HTMLไม่มีเมตาแท็กเพื่อบอกเบราว์เซอร์มือถือเกี่ยวกับความกว้างที่จะแสดงเอกสาร เบราว์เซอร์จะทำงานราวกับว่าเอกสารมีความกว้าง 980 พิกเซล สิ่งนี้เป็นจริงสำหรับโทรศัพท์ที่มีหน้าจอกว้าง 320 พิกเซล เช่นเดียวกับแท็บเล็ตขนาด 10 นิ้วที่ใช้ Android และ iOS และเบราว์เซอร์ Webkit วิธีการนี้บอกเป็นนัยว่าไซต์ที่มีความกว้างขั้นต่ำ 960 พิกเซลจะได้รับระยะขอบเล็กน้อยเพื่อให้อ่านเนื้อหาได้ง่ายขึ้น

หากความกว้างขั้นต่ำของเอกสารใหญ่ขึ้น ลักษณะการทำงานของเบราว์เซอร์จะเริ่มแตกต่างออกไป Safari บน iPhone/iPad จะบีบอัดเนื้อหาโดยส่วนใหญ่ ใน Android DIP - พิกเซลที่ไม่ขึ้นกับความหนาแน่นจะแสดงออกมาเองซึ่งจะเพิ่มเติมในภายหลัง หากความกว้างของเอกสารมากกว่า 980 และมากกว่าความกว้างของอุปกรณ์ใน DIP การเลื่อนไปทางขวาจะปรากฏขึ้น ตัวอย่างเช่น ไซต์ที่มีความกว้างของเนื้อหา 1,040 พิกเซลจะแสดงโดยไม่ต้องเลื่อนแนวนอนบน iPhone และ iPad (1024 พิกเซล) แต่เลื่อนได้บนโทรศัพท์ เช่น Galaxy S3 (ความละเอียดจริง 1280x720) หรือแท็บเล็ต Nexus 7 (ความละเอียดจริง 1280x800)

ควรมีข้อสรุปอะไรบ้าง? แม้จะมีจอไวด์สกรีนมากมายในเดสก์ท็อปพีซีและแล็ปท็อป แต่กริด 960 พิกเซลแบบเก่าที่ดีก็ไม่ได้สูญเสียความเกี่ยวข้องไป เบราว์เซอร์มือถือยังมีความสามารถในการปรับขนาดบล็อกข้อความให้พอดีในรูปแบบที่อ่านได้สะดวกบนอุปกรณ์ เช่น การบีบข้อความลงในคอลัมน์แคบบนโทรศัพท์และเพิ่มแบบอักษร สิ่งนี้จะไม่ทำงานหากข้อความที่มีบล็อกมีความสูงจำกัดอย่างเคร่งครัด อันที่จริง คุณไม่ควรสร้างไซต์ที่มีสิ่งใดจำกัดความสูง โดยเฉพาะอย่างยิ่งหากผู้เยี่ยมชมได้รับการวางแผนจากอุปกรณ์เคลื่อนที่ ศัตรูอีกประการหนึ่งของอุปกรณ์เคลื่อนที่ โดยเฉพาะโทรศัพท์ คือองค์ประกอบที่มีตำแหน่ง: คงที่ ตัวอย่างเช่น ปุ่มย้อนกลับที่ทันสมัยซึ่งทำงานตามผู้ใช้อย่างต่อเนื่องทั่วทั้งหน้า ยิ่งแย่ไปกว่านั้น - ดายขนาดใหญ่เช่นฝาตายตัว องค์ประกอบดังกล่าวไม่เพียงใช้พื้นที่ที่มีประโยชน์บนหน้าจอขนาดเล็กเท่านั้น แต่ยังอยู่ในตำแหน่งเดิมเมื่อขยายใหญ่ขึ้นด้วย ปัญหาเป็นเรื่องปกติสำหรับหน้าต่างโมดอล หากแสดงอยู่กลางหน้าจอ ให้เพิ่มจากโทรศัพท์มือถือ การเพิ่มเนื้อหาต้องใช้ความชำนาญพอสมควร ใช้ป๊อปอัปเช่น "ติดต่อกับเราได้ที่ ในโซเชียลเน็ตเวิร์ก!” พฤติกรรมในลักษณะนี้ โดยทั่วไปเป็นการดูหมิ่นอย่างรุนแรงต่อผู้ใช้อุปกรณ์เคลื่อนที่ เพราะการออกจากไซต์มักจะง่ายกว่าการปิดป๊อปอัปนี้

ลองมาสองสามไซต์เป็นตัวอย่าง

แม้ว่า Lenta.ru จะมีเวอร์ชันสำหรับมือถือที่ดีมาก แต่ก็ไม่มีการเปลี่ยนแปลงโดยอัตโนมัติ ในเมนูคงที่บนเดสก์ท็อป จะรวบรวมข้อมูลไปยังข้อความที่มีการปรับขนาดอัตโนมัติ ผู้ใช้ต้องเผชิญกับทางเลือกในการปรับขนาดด้วยมือหรือไม่ขี้เกียจเกินไปที่จะกำหนด m ใน URL

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

ป๊อปอัปแบบบัญญัติขั้นสูงในสไตล์ RBC ตัวอย่างที่โดดเด่นของสิ่งที่ไม่ควรทำ

อินทันคนเรียงทายว่าใคร. แน่นอนว่าฉันเข้าใจอย่างถ่องแท้ว่าทำไมจึงเป็นไปไม่ได้ที่จะทำสิ่งนี้กับเมนู แต่อย่างใดฉันก็ไม่อยู่ในอารมณ์ที่จะโต้แย้ง การถามคำถามอยู่นอกหัวข้อโดยสิ้นเชิง

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

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

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

แน่นอนว่าควรกำหนดอุปกรณ์พกพา และสำหรับอุปกรณ์พกพา สคริปต์ที่มุ่งเปลี่ยนอินเทอร์เฟซมาตรฐานไม่ควรดำเนินการ

คุณลักษณะที่น่ารำคาญอีกอย่างของเบราว์เซอร์มือถือคือพวกเขาไม่แคชแบบอักษรที่เสียบปลั๊กได้ในขณะนี้ PT Sans เดียวกันในทุกรูปแบบ เชื่อมต่อกับ Google Web Fonts ใช้เวลาโหลดนานอย่างเห็นได้ชัด ในขณะเดียวกันก็แทบไม่สูญเสีย Helvetica / Roboto ในตัวอย่างเห็นได้ชัด คิดอย่างรอบคอบว่าเวลาในการโหลดเพิ่มเติมสำหรับแบบอักษรที่คุณกำหนดเองนั้นคุ้มค่าหรือไม่

ขนาดและความละเอียดของหน้าจออุปกรณ์เคลื่อนที่ ความแตกต่างระหว่างความละเอียดหน้าจอจริงกับความละเอียดของเบราว์เซอร์มือถือ

iPhone และ iPad ใช้แนวคิดของคะแนน - คะแนนแอปเปิ้ล ความละเอียด iPhone ถึงรุ่น 5 - 320 x 480 พิกเซล Retina Display คืออะไร? Retina Display ใช้ความหนาแน่นของพิกเซลสองเท่า ซึ่งหมายความว่ามีพิกเซลจริง 4 พิกเซลต่อจุด ดังนั้น iPhone 4 ที่มีความละเอียดหน้าจอ 640 x 960 พิกเซลยังคงเป็น 320 x 480 พิกเซล แต่ในขณะเดียวกันกราฟิกก็มีรายละเอียดมากขึ้นเนื่องจากใช้ขนาดรูปภาพในแอปพลิเคชันสองเท่า สำหรับ iPhone 5 ค่าคะแนนเพิ่มขึ้นจาก 480 เป็น 568 สำหรับ iPad ทุกรุ่นรวมถึง Mini จะไม่เปลี่ยนแปลง - 1024x768

ตามค่าเริ่มต้น ในระดับ 1 ต่อ 1 กราฟิกมาตรฐานบนเว็บ (เช่น ภาพพื้นหลัง) จะแสดงในรูปแบบสองเท่า พิกเซลหนึ่งพิกเซลจะถูกยืดออกไป 4 พิกเซลของหน้าจอจริง บิตแมป. วิธีการใช้กราฟิกความละเอียดสูงในสถานการณ์ดังกล่าวจะกล่าวถึงในหัวข้อถัดไป สิ่งสำคัญที่ควรจำเกี่ยวกับการอนุญาตอุปกรณ์ iOS คือคุณไม่ควรคิดว่าหน้าเรตินาและหน้าที่ไม่ใช่เรตินามีความกว้างต่างกัน ไม่ ความแตกต่างอยู่ที่ความหนาแน่นของพิกเซลเท่านั้น สัดส่วนจะเหมือนกันทุกประการ

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

ความหนาแน่นของหน้าจอคือ 1 หมวดหมู่นี้ประกอบด้วยอุปกรณ์จำนวนมาก เช่น โทรศัพท์ 320x480 (HTC Hero, LG Optimus One), แท็บเล็ตขนาด 7 นิ้ว 1024x600 ( ซัมซุงกาแล็กซีแท็บ, Kindle Fire), แท็บเล็ตขนาด 10 นิ้ว (Asus Transformer, Acer A500, กาแลคซี่แท็บ 10’1).

ความหนาแน่นของหน้าจอ 1.33 ใช้ในแท็บเล็ตขนาด 7 นิ้ว เช่น Nexus 7 ความละเอียดทางกายภาพคือ 1280x800 ใน DIP คือ 960x600

ความหนาแน่นของหน้าจอ 1.5 - โทรศัพท์มือถือสูง หมวดหมู่ราคา 2554 และเฉลี่ย 2555 10 นิ้วเม็ดด้วยระบบ FullHD ตัวอย่างเช่น Nexus One 480x800 พิกเซล 360x533* DIP เอชทีซี วัน S - 540x960 พิกเซล, 360x640 DIP และ Asus แผ่นหม้อแปลงอินฟินิตี้ 1920x1200 พิกเซล, 1280x800 DIP

*ใน Android Developers จะพบ 534 แต่การวัดความกว้างของเบราว์เซอร์ผ่าน JS จะแสดงเป็น 533 ตามลำดับ และในการสืบค้นสื่อ คุณควรเน้นที่ตัวเลขนี้

ความหนาแน่นของหน้าจอ 2 - โทรศัพท์ระดับไฮเอนด์ปี 2012 และแท็บเล็ตสองสามเครื่อง ตัวอย่างเช่น HTC One X, Samsung Galaxy S3 - ความละเอียดหน้าจอ 1280x720, ขนาดใน DIP 360x640 แท็บเล็ต Google Nexus 10 - ความละเอียด 2560x1600 พิกเซล, 1280x800 DIP

ความหนาแน่นของหน้าจอ 3 - 2013 เรือธงพร้อมจอแสดงผล FullHD ด้วยความละเอียด 1920x1080 พิกเซล พวกเขายังคงมี DIP 360x640 เท่าเดิม

ทั้งหมดนี้ยังมี Google Nexus 4 ซึ่งไม่ล้าสมัยด้วยหน้าจอ 1280x768 พิกเซลที่มีความหนาแน่น 2 (384x640) สำหรับรุ่นที่มีปุ่มบนหน้าจอ 42DIP จะครอบครองแผงสำหรับพวกเขา ดังนั้นในรุ่นประเภทนี้ (Galaxy Nexus, Nexus 4, Sony Xperia Z) ในโหมดแนวตั้ง ความละเอียดของภาพบุคคลจะน้อยลงเล็กน้อย และจะอยู่ที่ 598 พิกเซล

ดังนั้นเราจึงมีความละเอียดสามระดับสำหรับแนวตั้ง - 320, 460 และ 384 ที่หายาก และแนวนอนสี่ครึ่ง - 480, 533, 568, 640 (598 พร้อมซอฟต์คีย์)

สำหรับแท็บเล็ต ได้แก่ แนวตั้ง 600 และ 800 และแนวนอน 960, 1024 และ 1280

ตารางด้านล่างแสดงรายการการอนุมัติทั่วไปส่วนใหญ่สำหรับผลิตภัณฑ์ยอดนิยม:

ฉันจะเริ่มต้นใช้งานเค้าโครงแอปบนอุปกรณ์เคลื่อนที่ได้อย่างไร

สำหรับผู้เริ่มต้น โปรดอ่านคำแนะนำ แอปพลิเคชันสำหรับแพลตฟอร์มต่างๆ ควรมีลักษณะที่แตกต่างกัน ตัวอย่างเช่น คลิกที่ลิงก์นี้เพื่อเปรียบเทียบองค์ประกอบทั่วไปของระบบปฏิบัติการต่างๆ

หากต้องการทำงานกับเลย์เอาต์ของแอพ iPhone ให้สร้างผืนผ้าใบขนาด 640x1136 (960) และใช้ขนาดเป็นทวีคูณของสอง กราฟิกทั้งหมด แบบอักษรทั้งหมดควรเป็นเช่นนั้น

บางส่วนของหน้าจอในแอปพลิเคชันในอนาคตของคุณอาจถูกครอบครองโดยแถบสถานะที่มีตัวแสดงสัญญาณ ตัวแสดงแบตเตอรี่ ฯลฯ นั่นคือ 20 จุดบน iOS และ 25 จุดบน Android ใน โทรศัพท์ Androidด้วยซอฟต์คีย์และแท็บเล็ต 48 DIP ที่ด้านล่างของหน้าจอถูกครอบครองโดยแผ่นด้านล่าง (แถบนำทาง) ในขณะเดียวกัน ในอุปกรณ์ที่ไม่เป็นไปตามมาตรฐาน เช่น แท็บเล็ตซัมซุงเนื่องจากการใช้แถบการนำทางของเชลล์ที่เป็นกรรมสิทธิ์และ แถบสถานะรวมกัน

สำหรับแอปพลิเคชันสำหรับโทรศัพท์ Android สิ่งสำคัญคือต้องมีโฮสต์อย่างน้อย 720x1280 ดีขึ้นทันที 1080x1960 ตามการตั้งค่าสถานะที่ทันสมัย

สำหรับผืนผ้าใบขนาด 720x1280 ขนาดต้องเป็นผลคูณของสอง ส่วนสำหรับ 1080x1960 คูณด้วยสาม การใช้ 480x800 หรือ 640x960 เป็นผืนผ้าใบเป็นความคิดที่แย่มาก

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

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

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

การปรับกราฟิกเว็บให้เหมาะสมสำหรับหน้าจอความหนาแน่นสูง

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

ในขณะเดียวกัน การสนับสนุน SVG ยังมีข้อจำกัดอยู่มาก และสำหรับความเข้ากันได้ย้อนหลังกับเบราว์เซอร์รุ่นเก่า คุณยังคงต้องใช้บิตแมป สิ่งที่น่าปวดหัวอีกอย่างคือการใช้สไปรต์ - จะต้องระบุค่าตำแหน่งพื้นหลังเป็นเปอร์เซ็นต์ซึ่งจะต้องใช้การคำนวณทางคณิตศาสตร์จำนวนมาก วิธีที่ซับซ้อนน้อยที่สุดคือการใช้รูปภาพเดียวกันหลายๆ เวอร์ชันผ่านคิวรีสื่อ เช่น -webkit-min-device-pixel-ratio: 2

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

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

โหวต: 416 | ยอดวิว: 4271