สำหรับอุปกรณ์พกพาความละเอียดนั้นใหญ่จริงขนาดหน้าจอเล็กเท่านั้น ตามที่:
คำตอบ:
การออกแบบที่ตอบสนองขึ้นอยู่กับความละเอียดหน้าจอหรือขนาดหน้าจอ แต่การออกแบบที่ตอบสนองจะขึ้นอยู่กับเนื้อหาและวิธีการทำที่อนุญาตให้พอดีกับขนาดและความละเอียดทั้งหมด
วิธีที่คุณคิดเกี่ยวกับการออกแบบที่ตอบสนองผิด ฉันคิดว่าคุณมาจากพื้นหลังการออกแบบการพิมพ์ทั่วไปใช่ไหม การออกแบบสำหรับเว็บมีอิสระมากขึ้น เว็บไซต์ที่ตอบสนองมักจะมีเบรกพอยต์ที่เหมือนกันหรือขนาด / ความละเอียดเฉพาะที่มักจะทำเพราะเว็บให้มากกว่านั้น - มันช่วยให้เข้าถึงทุกขนาดหน้าจอ คุณสามารถออกแบบโดยใช้ขนาดใดก็ได้ที่เหมาะสมกับสิ่งที่คุณออกแบบตราบใดที่เหมาะสม
กับที่ถูกกล่าวว่าวิธีที่ดีที่สุดคือการออกแบบในมือถือครั้งแรกวิธีซึ่งจริงๆควรตั้งชื่อมือถือมากที่สุดที่สำคัญ สิ่งนี้บังคับให้คุณมุ่งเน้นเนื้อหาที่สำคัญที่สุดและเป็นไปได้จากนั้นให้คุณเพิ่มมากขึ้นสำหรับหน้าจอที่ใหญ่ขึ้นแทนที่จะบังคับให้คุณเริ่มต้นด้วยหน้าจอขนาดใหญ่มากขึ้นจากนั้นจึงลบสิ่งต่าง ๆ ออกเมื่อออกแบบสำหรับวัตถุขนาดเล็ก คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ในของฉันไพรเมอร์ออกแบบที่ตอบสนอง
แต่เราต้องออกแบบด้วยวิธีที่ตอบสนองได้ แนวปฏิบัติที่ดีที่สุดซึ่งเป็นตัวอย่างจริงไม่ว่าจะในรูปแบบต้นแบบหรือในโปรแกรม wireframing บางอย่างไม่ใช่เอกสารแบบสแตติกเช่น PSD เมื่อพูดถึงด้านนักพัฒนาเราควรใช้หน่วยตอบสนองและจัดโครงสร้างโค้ดของเราด้วยวิธีที่เหมาะสม
คุณควรใส่สิ่งต่าง ๆ ในรูปของพิกเซลความหมายความละเอียดไม่ใช่ขนาดหน้าจอ
เป็นคำถามที่ดีมาก!
แค่ความคิดบางอย่างที่นี่แสดงความเห็นขัดแย้งเล็กน้อยที่เรากำลังเผชิญในวันนี้
เทคโนโลยีไม่ใช่สิ่งที่ควรจะเป็นมาตั้งแต่วัย
เราทุกคนควรออกแบบตามหน่วยชีวิตจริง (หรือขนาดที่รับรู้)ด้วยความยืดหยุ่นและอิสระในระดับหนึ่งเพื่อให้ผู้ใช้ทำการปรับเปลี่ยนเพิ่มเติม
แต่หากต้องการทราบการวัดในชีวิตจริงที่เราต้องการข้อมูลทั้งคู่ ขนาดฟิสิคัลและความละเอียดอุปกรณ์ = ความหนาแน่นของพิกเซล
แต่ปรากฎว่าเพียงไม่กี่ปีที่ผ่านมาอุปกรณ์หน้าจอเริ่มประกาศความหนาแน่นของพิกเซล และบางคนไม่ได้ประกาศไปยังเซิร์ฟเวอร์เพียงแค่ทำการเผยแพร่จำนวนมากเกี่ยวกับเรื่องนี้ (Aka Ipad, Iphone)
ความละเอียดการแสดงผลสามารถตรวจพบได้โดยระบบปฏิบัติการเพราะมันเป็นสิ่งจำเป็นในการส่งสัญญาณตาม แต่สำหรับขนาดหน้าจอชีวิตจริงที่เราต้องการฐานข้อมูลขนาดใหญ่ของแต่ละรุ่น ไม่ดี.
นั่นทำให้เรามีความละเอียดหน้าจอเพียงแค่นี้ซึ่งเป็นข้อมูลที่เราสามารถรู้ได้
แต่มันแตกต่างอย่างสิ้นเชิงกับการออกแบบสำหรับจอภาพ FullHD ขนาดใหญ่กว่าความละเอียดเดียวกันบนอุปกรณ์มือถือ ทั้ง 1920x1080 อุ๊ยตาย
กรณีพิเศษคือในโปรเจ็คเตอร์เนื่องจากเราไม่มีเงื่อนงำระยะฉายและระยะทางของผู้ชม
วิธีแก้ปัญหาบางส่วนคือการสืบค้นสื่อและองค์ประกอบเวกเตอร์
สำหรับการออกแบบเว็บ:อย่างน้อยก็จนกว่าเราจะพบสิ่งที่ดีกว่า
การออกแบบของไหล (ร้อยละ) และการไหลตามธรรมชาติส่วนที่กำหนดไว้อย่างดี
กว้าง 1920
ด้วยการสืบค้นสื่อน่าจะอยู่ที่ 1280
และ / หรือที่ 1024
อาจอยู่ที่ 720
และ 480
ด้วยการตรวจจับอุปกรณ์สำหรับการสนับสนุนเพิ่มเติม
สำหรับแอพมือถือแบบเนทีฟ
เนื่องจากเฉพาะเจาะจงมากเพียงทำตามคำแนะนำของแบรนด์เกี่ยวกับ UI และไอคอน
แก้ไข
ทำไมต้องเลือกความละเอียดหน้าจอขนาดเล็กบนอุปกรณ์มือถือ FullHD
สมาร์ทโฟนมีความละเอียดที่แท้จริงของ FullHD แต่โดยปกติแล้วจะมีการประกาศความละเอียดเล็กน้อยไปยังเซิร์ฟเวอร์และเบราว์เซอร์ คุณสามารถทดสอบ googling นี้https://www.google.com/search?q=what+is+my+screen+resolutionเพื่อให้การสืบค้นสื่อทำงานได้
ก่อนอื่นขอขอบคุณทุกท่านสำหรับคำตอบและแนวทางอันมีค่าช่วยได้แน่นอน!
อนุญาตให้ฉันเพิ่มข้อสรุปของฉัน:
ในทางปฏิบัติการตั้งเป้าหมายความละเอียดหน้าจอมือถือไม่ใช่ UX ที่ดีความละเอียดสูงเกินไปสำหรับหน้าจอขนาดเล็กแบบอักษรจะเล็กเกินไปที่จะอ่านไอคอนจะเล็กเกินกว่าจะคลิกเป็นต้น
ดังนั้นจึงเป็นการดีกว่าที่จะทำให้การออกแบบขึ้นอยู่กับขนาดวิวพอร์ตที่แท้จริง! วิธีนี้ขึ้นอยู่กับสิ่งที่ผู้ใช้สามารถมองเห็นและรู้สึกได้
เพื่อให้บรรลุตามนั้นในชีวิตจริงเราควรเพิ่มเมตาแท็กความกว้างวิวพอร์ตภายใน<head>เอกสาร HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">สิ่งนี้บอกให้เบราว์เซอร์แสดงหน้าเว็บที่มีความกว้างเท่ากับความกว้างของหน้าจอดังนั้นจึงมั่นใจได้ว่าความกว้างของหน้า HTML เท่ากับความกว้างของหน้าจอในรูปของพิกเซล จากนั้นสามารถวางแผนการพัฒนาได้อย่างง่ายดายด้วยข้อความค้นหาสื่อที่กำหนดเป้าหมายขนาดวิวพอร์ตมือถือที่แตกต่างกัน (ซึ่งค่อนข้างใกล้เคียงกัน) และจะสร้างองค์ประกอบที่ชัดเจนยิ่งขึ้น
โปรดแก้ไขฉันหากฉันผิด
จากประสบการณ์อันต่ำต้อยของฉันฉันแนะนำขั้นตอนด้านล่างเพื่อการพัฒนาเว็บไซต์ที่ตอบสนองดีขึ้น:
1-ใช้เมตาดูพอร์ต (ดูด้านบน) มันจะเพิ่มอันดับของหน้าเว็บในผลการค้นหามือถือตาม google http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
หลังจากการทดสอบปรากฏว่าการเพิ่มเมตาวิว - พอร์ตเพียงอย่างเดียวจะให้คะแนนเว็บไซต์ของคุณในเครื่องมือทดสอบอุปกรณ์เคลื่อนที่ https://developers.google.com/speed/pagespeed/insights/
2-คุณอาจต้องการพิจารณาการใช้แนวทางมือถือเป็นครั้งแรกมันจะง่ายกว่าเสมอที่จะใหญ่กว่าเล็กกว่า (ขึ้นอยู่กับความซับซ้อนของเว็บไซต์ของคุณ)
3-ใช้ระบบตอบสนองแบบไฮบริดซึ่งเป็นการผสมผสานระหว่างการปรับตัว (fluid) และการตอบสนอง (css media-query) เพื่อบรรลุสิ่งนี้:
ใช้ร้อยละสำหรับความกว้างและระยะขอบแนวนอน / แพ็ด (ระยะขอบแนวตั้งอาจมีขนาดพิกเซลคงที่หากคุณต้องการ .. การเลื่อนไม่ใช่ปัญหาอีกต่อไป)
ใช้emสำหรับแบบอักษรด้วยวิธีนี้เมื่อคุณเปลี่ยนขนาดตัวอักษรสำหรับเนื้อความ (หรือ html) ในการค้นหาสื่อองค์ประกอบ CSS ทั้งหมดจะปรับให้เหมาะกับขนาดนั้นโดยใช้ px จะทำให้มันเป็นฝันร้ายเพราะคุณต้องไปสำหรับ CSS แต่ละคลาสและ เปลี่ยนขนาดตัวอักษร
ลอยของ div ไปซ้ายเพื่อให้พวกเขาอย่างถูกต้องเพื่อจัดพื้นที่ว่าง (หรือขวาถ้าการออกแบบของคุณต้องดังนั้น)
4- กำหนดจุดพักใช้เครื่องมือทดสอบที่ตอบสนองต่อสิ่งนั้น ฉันใช้มุมมองการออกแบบที่ตอบสนองของ firefox เพียงแค่ลดความกว้างให้แคบลงจนกว่าคุณจะไปถึงจุดที่เว็บไซต์ผิดปกติ (เช่น 500px) นั่นคือจุดพักที่ทำเครื่องหมายไว้
ใช้กฎ CSS ใหม่ภายในเคียวรีสื่อบันทึกสำหรับจุดพัก (500px)
5- อย่าลืมรักษาคุณภาพและความคมชัดของเว็บไซต์! หากองค์ประกอบไม่ชัดเจนและอยู่ใกล้กันเกินไปให้ขยายความกว้างขององค์ประกอบเพื่อใช้ความกว้างของคอนเทนเนอร์และทำให้สแต็กเป็นแนวตั้ง
และอย่าลืมกำหนดขนาดตัวอักษรใหม่ให้กับร่างกายเพื่อให้องค์ประกอบย่อยทั้งหมดได้รับแบบอักษรที่ใหญ่ขึ้นและอ่านได้ง่ายขึ้น
6-ทำซ้ำการทดสอบการตอบสนองและกำหนดจุดพักที่สองของคุณมีโอกาสมากที่คุณจะไม่ได้รับคะแนนที่แตกต่างกันมากเพราะเราใช้การออกแบบของไหลที่นี่และนั่นคือที่ที่ใช้เปอร์เซ็นต์จะคืนทุน!
ฉันเคยทำงานในเว็บไซต์ขนาดใหญ่ที่มีองค์ประกอบการออกแบบที่หนักหน่วงมาก่อนและต้องการเพียง 2 สื่อแบบสอบถาม :)
หวังว่าจะช่วยได้
วิธีที่หน้าตอบสนองจะปรับเปลี่ยนตามขนาดของวิวพอร์ต (ไม่ใช่หน้าจอ) ในพิกเซลเสมือน (ไม่ใช่พิกเซลจริง)
บนเดสก์ท็อปแบบดั้งเดิมโดยที่ 1 virtual pixel = 1 พิกเซลจริงหากเบราว์เซอร์ของคุณถูกตั้งค่าเป็นความกว้าง 1,000px หน้าเว็บจะทำการรีโฟลว์ให้พอดี
บน iPhone 6 ที่ 1 พิกเซลเสมือน (Apple เรียกจุดเหล่านี้) = 3 พิกเซลจริงความกว้างของเบราว์เซอร์คือความกว้างของหน้าจอและเนื้อหาจะปรับให้พอดีกับความกว้าง 417px (แม้ว่าจะเป็นจริง 1242 พิกเซล)
ดังนั้นมันจึงค่อนข้างแปลกที่ในตัวอย่างข้างต้นอุปกรณ์ที่มีพิกเซลจริงน้อยลงจะถูกมองว่าเป็นวิวพอร์ตที่กว้างขึ้นในรูปแบบที่ตอบสนองได้