ขนาดหน้าจอ
สรุปมิติการพัฒนาของซีรีส์ iPhone ที่เราคุ้นเคยมีดังนี้
△ขนาดการพัฒนาของ iPhone แต่ละรุ่นแปลงเป็นขนาดพิกเซลที่รู้จัก:
△มิติหลายมิติของแต่ละรุ่นจริงๆ แล้วแผนผังการขยายคือความสัมพันธ์ในการขยายระหว่างขนาดพิกเซลและขนาดการพัฒนา แต่นี่เป็นเพียงการแสดงภายนอกเท่านั้น ปัจจัยหลักที่มีอิทธิพลในการขยายคือ PPI (DPI) การทำความเข้าใจความสัมพันธ์ระหว่างความหนาแน่นของหน้าจอและขนาดต่างๆ จะช่วยให้เราเข้าใจแนวคิดเรื่องการขยายอย่างลึกซึ้ง: "เรียนรู้พื้นฐาน! คู่มือ DPI ที่ออกแบบมาเพื่อนักออกแบบ》
ในการอัปเกรดนี้ ขนาดหน้าจอและความละเอียดของ iPhone8 ได้สืบทอดประเพณีอันดีงามของ iPhone6 และใหม่กว่า
อย่างไรก็ตาม iPhone X มีการเปลี่ยนแปลงครั้งใหญ่ทั้งในด้านขนาดหน้าจอ ความละเอียด และแม้แต่รูปร่าง ลองใช้ iPhone 8 เป็นข้อมูลอ้างอิงเพื่อดูว่าเราควรพิจารณาการปรับตัวของ iPhone X อย่างไร
มาดูการเปลี่ยนแปลงขนาด iPhone X กัน:
2. การปรับตัว iPhoneX --- พื้นที่ปลอดภัย (พื้นที่ปลอดภัย)ความคิดเห็นของ Apple เกี่ยวกับเค้าโครงการออกแบบของ iPhone X มีดังนี้:
เนื้อหาหลักควรอยู่ในพื้นที่ปลอดภัยเพื่อให้แน่ใจว่าจะไม่ถูกบดบังด้วยมุมโค้งมน (มุม) ตัวเซ็นเซอร์ (ตัวเซ็นเซอร์ หน้าม้าเต็ม) และตัวแสดงสถานะ Home ที่ด้านล่าง กล่าวอีกนัยหนึ่ง เนื้อหาที่เราออกแบบเพื่อแสดงควรอยู่ในพื้นที่ปลอดภัยให้มากที่สุด
3. การปรับเปลี่ยน iPhoneX --- รูปแบบการปรับเปลี่ยน viewport-fit 3.1 การปรับเปลี่ยน PhoneX เมตาแท็กของ viewport-fit ถูกใช้เป็นรูปแบบการปรับตัวใน iOS 11 ค่าเริ่มต้นของ viewport-fit คืออัตโนมัติค่าของ viewport-fit เป็นดังนี้:
| อัตโนมัติ | ค่าเริ่มต้น: viewprot-fit:contain; เนื้อหาของหน้าจะแสดงในพื้นที่ปลอดภัย |
| ปิดบัง | viewport-fit:cover เนื้อหาของหน้าเต็มหน้าจอ |
การตั้งค่าเมตาแท็กที่พอดีกับวิวพอร์ต (เมื่อครอบคลุม)
<meta name=viewport content=width=device-width,initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover>
3.2 ข้อมูลเบื้องต้นเกี่ยวกับฟังก์ชัน css Constant() และ safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom
ดังที่แสดงไว้ข้างต้น WebKit ใน iOS 11 มีฟังก์ชัน CSS ใหม่คงที่ () และชุดของค่าคงที่ที่กำหนดไว้ล่วงหน้าสี่ค่า ได้แก่ safe-area-inset-left, safe-area-inset-right, safe-area -inset-top และ safe -พื้นที่แทรก-ด้านล่าง เมื่อรวมเข้าด้วยกัน อนุญาตให้สไตล์อ้างอิงขนาดพื้นที่ปลอดภัยของแต่ละด้าน
3.1 เมื่อเราตั้งค่า viewport-fit:contain ซึ่งเป็นเวลาเริ่มต้น ตั้งค่า safe-area-inset-left, safe-area-inset-right, safe-area-inset-top และ safe-area-inset-bottom ฯลฯ . พารามิเตอร์ไม่มีผลกระทบ
3.2 เมื่อเราตั้งค่า viewport-fit:cover: การตั้งค่าจะเป็นดังนี้
body { padding-top: คงที่ (safe-area-inset-top); // ความสูงของแถบนำทาง + แถบสถานะคือ 88px padding-left: คงที่ (safe-area-inset-left); // หากหน้าจอ ไม่เป็นแนวตั้ง คือ 0 padding-right: คงที่ (safe-area-inset-right); // หากหน้าจอไม่ใช่แนวตั้ง แสดงว่าเป็น 0 padding-bottom: ค่าคงที่ (พื้นที่ปลอดภัย-แทรก-ด้านล่าง);//ความสูงของส่วนโค้งด้านล่างคือ 34px } 4. การปรับตัว iPhoneX --- สถิติความสูงวิวพอร์ตพอดี: ปก + แถบนำทาง
5. การปรับตัว iPhoneX --- แบบสอบถามสื่อโปรดทราบว่าที่นี่ใช้ 690px (ความสูงของพื้นที่ปลอดภัย) ไม่ใช่ 812px
@media เท่านั้น หน้าจอ และ (กว้าง: 375px) และ (สูง: 690px){ body { พื้นหลัง: สีน้ำเงิน }} 6.iphoneX viewport-พอดี สรุปปัญหา1. เมื่อหน้า iphoneX ใช้สีไล่ระดับสี ถ้า viewport-fit:cover;
1.1 ความแตกต่างระหว่างสีเดียวและสีไล่ระดับสีจะถูกตั้งค่าเมื่อตั้งค่าสีพื้นหลัง หากเป็นสีเดียว สีนั้นจะเต็มหน้าจอทั้งหมด หากตั้งค่าสีไล่ระดับสีจะแสดงผลที่ระดับความสูงเท่านั้น องค์ประกอบลูก และความสูงของหน้าคือ 690px เท่านั้น
ร่างกายได้รับการแก้ไขเป็น:
<body><div class=content>นี่คือองค์ประกอบย่อย</div></body>
1. เมื่อขาวดำ:
* { padding: 0; margin: 0; } body { พื้นหลัง: สีเขียว; padding-top: คงที่ (safe-area-inset-top); //88px /*padding-left: คงที่ (safe-area-inset-left );*/ /*padding-right: คงที่(safe-area-inset-right);*/ /*padding-bottom: คงที่(safe-area-inset-bottom);*/ }2. สีไล่ระดับสี
* { ช่องว่างภายใน: 0; ระยะขอบ: 0; } เนื้อความ { พื้นหลัง: -webkit-gradient (เชิงเส้น, 0 0, 0 ด้านล่าง, จาก (#ffd54f), ถึง (#ffaa22)); -inset-top); //88px /*padding-left: คงที่(safe-area-inset-left);*/ /*padding-right: ค่าคงที่ (พื้นที่ปลอดภัย-แทรก-ขวา);*/ /*padding-bottom: ค่าคงที่(พื้นที่ปลอดภัย-แทรก-ด้านล่าง);*/ }วิธีแก้ปัญหาการใช้สีไล่ระดับให้เต็มหน้าจอ การตั้งค่า CSS มีดังนี้
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>การออกแบบเว็บไซต์สำหรับ iPhone X: การเคารพพื้นที่ปลอดภัย</title> <style> * { ช่องว่างภายใน: 0; ระยะขอบ: 0; } เนื้อหา { ความสูง: 100%; คงที่ (พื้นที่ปลอดภัย-แทรก-ซ้าย); คงที่ (พื้นที่ปลอดภัย-แทรก-ขวา); การไล่ระดับสี (เชิงเส้น, 0 0, 0 ด้านล่าง, จาก (#ffd54f), ถึง (#ffaa22)); ความกว้าง: 100%; ความสูง: 724px; </style></head><body><div class=content>นี่คือองค์ประกอบย่อย</div></body></html>2. องค์ประกอบของหน้าใช้การปรับตำแหน่งคงที่: {position:fixed;}
2.1 เมื่อหน้าองค์ประกอบลูกได้รับการแก้ไขที่ด้านล่าง เมื่อใช้ viewport-fit:contain; คุณจะเห็นว่าเมื่อแสดงด้านล่าง: 0 มันจะแสดงเฉพาะในพื้นที่ปลอดภัยเท่านั้น
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>การออกแบบเว็บไซต์สำหรับ iPhone X: คำนึงถึงพื้นที่ปลอดภัย</title> <style> * { การขยาย: 0; ระยะขอบ: 0; } /*html,body {*/ /*height: 100%;*/ /*}*/ body { พื้นหลัง: สีเทา; /*padding-top: คงที่(safe-area-inset-top);*/ /*padding-left: คงที่(safe-area-inset-left) );*/ /*padding-right: คงที่ (safe-area-inset-right);*/ /*padding-bottom: คงที่ (safe-area-inset-bottom);*/ } .top { ความกว้าง: 100%; ความสูง: 44px; .bottom { ตำแหน่ง: คงที่; ด้านล่าง: 0; ขวา: 44px; head><body> <div class=top>นี่คือด้านบน</div> <div class=bottom>นี่คือด้านล่าง</div></body></html>2.1 เมื่อหน้าองค์ประกอบลูกได้รับการแก้ไขที่ด้านล่าง เมื่อใช้ viewport-fit:cover คุณจะเห็นว่าด้านล่าง:0 จะแสดงเฉพาะในพื้นที่ปลอดภัย
เพิ่ม html,body {width:100%;heigth:100%}
รูปที่ 1:
* { ช่องว่างภายใน: 0; ระยะขอบ: 0; } เนื้อหา { ความสูง: 100%; } เนื้อหา { พื้นหลัง: สีเทา; พื้นที่แทรก-ซ้าย); ช่องว่างภายใน: คงที่ (พื้นที่ปลอดภัย-แทรก-ขวา); ความกว้าง: 100%; ความสูง: 44px;รูปที่ 2:
* { ช่องว่างภายใน: 0; ระยะขอบ: 0; } เนื้อหา { ความสูง: 100%; } เนื้อหา { พื้นหลัง: สีเทา; พื้นที่แทรกซ้าย); ช่องว่างภายใน: คงที่ (พื้นที่ปลอดภัย-แทรก-ขวา); /*ช่องว่างภายใน: คงที่(พื้นที่ปลอดภัย-แทรก-ด้านล่าง);*/ } .top { ความกว้าง: 100%; ความสูง: 44px;2.3 วิธีแก้ปัญหาสำหรับเลเยอร์มาสก์ป๊อปอัพ alertView
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, มาตราส่วนเริ่มต้น=1.0, มาตราส่วนขั้นต่ำ=1.0 , ขนาดสูงสุด=1.0, ผู้ใช้ปรับขนาดได้=no>--> <meta name=viewport เนื้อหา=ความกว้าง=ความกว้างของอุปกรณ์,ขนาดเริ่มต้น=1.0,ขนาดต่ำสุด=1.0,ขนาดสูงสุด=1.0, user-scalable=no, viewport-fit=cover> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { ระยะขอบ: 0; } html, body { ความกว้าง: 100%; ความสูง: 100%; } เนื้อความ { ขนาดตัวอักษร: 0.32rem; ค่าคงที่ (พื้นที่ปลอดภัย - สิ่งที่ใส่เข้าไป - ด้านบน); ค่าคงที่ (พื้นที่ปลอดภัย - สิ่งที่ใส่เข้าไป - ซ้าย); -inset-bottom); } .content { text-align: center; } .testBut { ระยะขอบ: 50px อัตโนมัติ; 1px solid darkgray; โครงร่าง: ไม่มี; ผู้ใช้เลือก: ไม่มี; สีพื้นหลัง: สีเหลือง; class=content> <ปุ่ม class=testBut onclick=showLoading()>การโหลดป๊อปอัป</button> </section> <script type=text/javascript src=alertView.js></script> <script> ฟังก์ชั่น showLoading() { UIAlertView.show({ ประเภท: อินพุต, ชื่อ: คำเตือนที่อบอุ่น, // เนื้อหาหัวข้อ: สมาชิก VIP กำลังจะหมดอายุ, // รับ isKnow ใหม่: false }); var xx = ใหม่ UIAlertView(); console.log(xx); } </script></body></html> สรุปข้างต้นคือสิ่งที่บรรณาธิการแนะนำให้คุณเกี่ยวกับการปรับหน้า HTML5 ให้เข้ากับ iPhoneX ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!