Mobile Development

การพัฒนามือถือ

สารบัญ

• 1. แนวคิดที่เกี่ยวข้องเกี่ยวกับการพัฒนามือถือ
  • (i) หน้าจอที่เกี่ยวข้อง
  • (2) ความเกี่ยวข้องของพิกเซล
  • (iii) การแสดงภาพความละเอียดสูง
  • (iv) Viewport ที่เกี่ยวข้อง
  • (v) ซูม
• 2. วิวพอร์ต
  • 1. ความกว้าง
  • 2. ระดับเริ่มต้น
  • 3. สูงสุด
  • 4. ระดับต่ำสุด
  • 5. ผู้ใช้สามารถลดขนาดได้
  • 6. Viewport-Fit
• iii. การปรับตัว
  • 1. การดัดแปลงวิวพอร์ต
  • 2. การปรับตัวใหม่
  • 3.VW Adaptation (เปอร์เซ็นต์)
  • 4. เส้นขอบพิกเซลทางกายภาพ (รู้เท่านั้น)
• 4. กิจกรรมมือถือ
  • 1. ประเภทเหตุการณ์
  • 2. สถานการณ์แอปพลิเคชัน
  • 3. คลิกเพื่อเจาะ touch => คลิก
  • 5. การเจาะอินทราเน็ต

1. แนวคิดที่เกี่ยวข้องเกี่ยวกับการพัฒนามือถือ

(i) หน้าจอที่เกี่ยวข้อง

1. ขนาดหน้าจอ

หมายถึงความยาวในแนวทแยงของหน้าจอเป็นนิ้ว ขนาดทั่วไป ได้แก่ : 3.5 นิ้ว, 4.0 นิ้ว, 5.0 นิ้ว, 5.5 นิ้ว, 6.0 นิ้ว ฯลฯ

หมายเหตุ: 1 นิ้ว (นิ้ว) = 2.54 ซม. (ซม.)

2. ความละเอียดหน้าจอ

มันหมายถึงจำนวน จุดพิกเซลทางกายภาพ ทั้งหมดบนหน้าจอในทิศทางแนวนอนและแนวตั้งซึ่งโดยทั่วไปจะแสดงโดย n * m ตัวอย่างเช่น: ความละเอียดหน้าจอของ iPhone6 ​​คือ: 750 * 1334

• สังเกต:
  • ความละเอียดหน้าจอเป็นค่าคงที่และไม่สามารถแก้ไขได้! -
  • ความละเอียดหน้าจอและความละเอียดการแสดงผลเป็นสองแนวคิด สิ่งที่สามารถแก้ไขได้ในการตั้งค่าระบบคือ: ความละเอียดของการแสดงผล
  • ความละเอียดหน้าจอ> = ความละเอียดแสดงผล

ความละเอียดโทรศัพท์มือถือทั่วไป

แบบอย่าง	ความละเอียด (ผลรวมของพิกเซลทางกายภาพ)
iPhone 3G/3GS	320 * 480
iphone 4 / 4s	640 * 960
iPhone 5/5s	640 * 1136
iPhone 6/7/8	750 * 1334
iphone 6p / 7p / 8p	1242 * 2208
iPhone X	1125 * 2436
HAWEI P30	1080 * 2340
HAWEI MATE40	2772 * 1344
Xiaomi 10	2340 * 1080
Xiaomi 11	3200 * 1440

3. ความหนาแน่นของหน้าจอ

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

(2) ความเกี่ยวข้องของพิกเซล

1. พิกเซลทางกายภาพ

พิกเซลทางกายภาพหรือที่เรียกว่าพิกเซลอุปกรณ์ เป็นหน่วยที่มีความยาว (PX) พิกเซลทางกายภาพเป็นจุดถ่ายภาพทางกายภาพบนหน้าจอซึ่งเป็นส่วนประกอบทางกายภาพที่เรืองแสงเล็ก ๆ (ซึ่งสามารถเข้าใจได้ง่ายว่าเป็นหลอดไฟขนาดเล็กสุด ๆ ) ซึ่งเป็นความละเอียดขั้นต่ำที่หน้าจอสามารถแสดงได้ จำนวนจุดพิกเซล (ความละเอียด) ของหน้าจอเป็นพารามิเตอร์ที่สำคัญของหน้าจอโทรศัพท์มือถือและ ถูกกำหนดโดยผู้ผลิตหน้าจอและไม่สามารถแก้ไขได้หลังจากการผลิต ตัวอย่างเช่นพิกเซลทางกายภาพที่ iPhone6 ​​มีในทิศทางแนวนอนคือ 750 และพิกเซลทางกายภาพที่มีในทิศทางแนวตั้งคือ 1334 ซึ่งแสดงโดย 750*1334

2. CSS พิกเซล

CSS Pixel ยังเป็นที่รู้จักกันในชื่อ: Logical Pixel CSS Pixel เป็นหน่วยความยาวนามธรรมและหน่วยยังเป็น PX มันถูกสร้างขึ้นสำหรับนักพัฒนาเว็บเพื่อวัดขนาดเนื้อหาบนหน้าเว็บอย่างแม่นยำ เราใช้ CSS Pixels ในการเขียน CSS JS Less

3. อุปกรณ์พิกเซลอิสระ

พิกเซลที่ไม่ขึ้นกับอุปกรณ์เรียกว่า DIP หรือ DP (พิกเซลที่ไม่ขึ้นกับอุปกรณ์) หรือที่เรียกว่า: พิกเซลที่มีความหนาแน่นของหน้าจอ

บทนำ: ในยุคที่ [หน้าจอ HD] ไม่ปรากฏขึ้น 1 CSS Pixel สอดคล้องกับ 1 พิกเซลทางกายภาพ แต่เนื่องจากการเกิดขึ้นของ [หน้าจอ HD] ทั้งสองไม่ได้มีความสัมพันธ์แบบ 1 ต่อ 1 อีกต่อไป ในปี 2010 Apple เปิดตัวมาตรฐานการแสดงผลใหม่: บีบอัดจุดพิกเซลทางกายภาพมากขึ้นลงในหน้าจอ ในขณะที่ขนาดหน้าจอยังคงไม่เปลี่ยนแปลง ดังนั้นความละเอียดจะสูงขึ้นและเอฟเฟกต์การแสดงผลจะดีขึ้นและละเอียดอ่อนยิ่งขึ้น Apple เรียกหน้าจอนี้: หน้าจอ Retina (หรือที่รู้จักกันในชื่อ Retina Screen) และในเวลาเดียวกันก็เปิดตัวผลิตภัณฑ์ดิจิตอลที่สร้างขึ้นมาพร้อมกับหน้าจอนี้ - iPhone 4

โปรแกรมเมอร์เขียนว่า: Width = 2px, ความสูง = 2px Box หากพิกเซล CSS ตรงกับ 1 พิกเซลทางกายภาพเนื่องจากขนาดหน้าจอของ iPhone3G/S และ iPhone4 นั้นเหมือนกับ iPhone4 หน้าจอของ iPhone4 สามารถรองรับพิกเซลทางกายภาพได้มากขึ้น ในทางทฤษฎีกล่องนี้จะเล็กกว่าบนหน้าจอ iPhone4 มากกว่าบนหน้าจอ iPhone3G/s ความจริงก็คือ iphone3g/s มีขนาดเท่ากับ iphone4! - - แต่ iPhone 4 นั้นละเอียดอ่อนและชัดเจนมากขึ้น ทำอย่างไร? ขึ้นอยู่กับพิกเซลอิสระของอุปกรณ์

การเกิดขึ้นของพิกเซลอิสระของอุปกรณ์ทำให้องค์ประกอบมีขนาดปกติแม้ใน [หน้าจอ HD] S ทำให้รหัสไม่ได้รับผลกระทบจากอุปกรณ์ มันถูกตั้งค่าโดยผู้ผลิตอุปกรณ์ตามลักษณะหน้าจอและไม่สามารถเปลี่ยนแปลงได้

ความสัมพันธ์ระหว่างอุปกรณ์อิสระพิกเซลกับ CSS Pixel:

• ในกรณีมาตรฐาน (ไม่มีซูม): 1 CSS Pixel = 1 อุปกรณ์อิสระพิกเซล

ความสัมพันธ์ระหว่างอุปกรณ์อิสระพิกเซลและพิกเซลทางกายภาพ:

• ภายใต้หน้าจอปกติ: 1 อุปกรณ์ฟิสิคัลพิกเซล = 1 พิกเซลทางกายภาพ
• ใต้หน้าจอ HD: 1 อุปกรณ์ฟิสิคัลพิกเซล = n พิกเซลฟิสิคัล

4. อัตราส่วนพิกเซล

อัตราส่วนพิกเซล (DPR, อัตราส่วนพิกเซลอุปกรณ์): อัตราส่วนของ [พิกเซลทางกายภาพ] และ [อุปกรณ์อิสระพิกเซล] ในทิศทางเดียว นั่นคือ: dpr = พิกเซล/พิกเซลอิสระพิกเซล

• ใช้ js เพื่อรับ dpr: window.devicepixelratio
• พารามิเตอร์พิกเซลหน้าจอของโทรศัพท์มือถือหลายเครื่อง:

แบบอย่าง	ความละเอียด (ผลรวมของพิกเซลทางกายภาพ)	อุปกรณ์อิสระพิกเซล (DIP หรือ DP)	อัตราส่วนพิกเซล (DPR)
iPhone 3G/3GS	320 * 480	320 * 480	1
iphone 4 / 4s	640 * 960	320 * 480	2
iPhone 5/5s	640 * 1136	320 * 568	2
iPhone 6/7/8	750 * 1334	375 * 667	2
iphone 6p / 7p / 8p	1242 * 2208	414 * 736	3
iPhone X	1125 * 2436	375 * 812	3

https://uiiiiii.com/screen/index.htm

(iii) การแสดงภาพความละเอียดสูง

1. บิตอิมเมจพิกเซล

บิตแมปและไดอะแกรมเวกเตอร์

• บิตแมป: หรือที่รู้จักกันในชื่อกราฟิก DOT เมทริกซ์หรือภาพแรสเตอร์ประกอบด้วยจุด N พิกเซล มันจะบิดเบือนหลังจากซูมเข้า (ทั่วไป: PNG, JPEG, JPG, GIF) โดยทั่วไปแก้ไขด้วยซอฟต์แวร์เช่น Photoshop
• กราฟิกเวกเตอร์: หรือที่เรียกว่าภาพที่มุ่งเน้นวัตถุหรือภาพวาดมันถูกกำหนดทางคณิตศาสตร์เป็นชุดของคะแนนที่เชื่อมต่อด้วยเส้นและจะไม่บิดเบือนหลังจากซูมเข้า (ทั่วไป: SVG) ใช้ซอฟต์แวร์โดยทั่วไปเพื่อแก้ไขโดยใช้ Adobe Illustrator, Sketch และซอฟต์แวร์อื่น ๆ

พิกเซลอิมเมจบิตยังเป็นหน่วยที่มีความยาว พิกเซลภาพบิต สามารถเข้าใจได้ว่าเป็น "กริดขนาดเล็ก" ในบิตแมปซึ่งเป็นหน่วยที่เล็กที่สุดของบิตแมป

2. การแสดงภาพความละเอียดสูง (แบบสอบถามสื่อ)

ในปัจจุบันมีเพียงโลโก้เท่านั้นที่จะต้องแสดงในความละเอียดสูงหรือโลโก้รูปแบบ SVG สามารถจัดเตรียมไว้เพื่อแก้ปัญหาได้ มิฉะนั้นจะใช้การสืบค้นสื่อ:

 @media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
      . logo {
        content : url (.. / imgs / logo@ 2 x.jpg)
      }
    }
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
  . logo {
    content : url (.. / imgs / logo@ 3 x.jpg)
  }
}

(iv) Viewport ที่เกี่ยวข้อง

PC Viewport

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

    console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
    console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
    console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
    console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; 

Viewport มือถือ

บนอุปกรณ์มือถือผู้ผลิตเบราว์เซอร์ประสบปัญหาค่อนข้างใหญ่: พวกเขานำเสนอหลายหมื่นคนแม้กระทั่งหน้าเว็บพีซีหลายร้อยล้านบนอุปกรณ์พกพาในลักษณะที่สมบูรณ์โดยไม่มีแถบเลื่อนแนวนอน? จากนั้นเราจำเป็นต้องแนะนำสามแนวคิดของเทอร์มินัลมือถือ: 1. Layout Viewport, 2. Visual Viewport, 3. มุมมองในอุดมคติ

1. Layout Viewport

ใช้เพื่อแก้ปัญหาการแสดงหน้าหน้าบนโทรศัพท์มือถือ ในวันแรก ๆ เราทำสิ่งนี้: ความกว้างของหน้าเว็บพีซีโดยทั่วไป: 960px ช่วง 1024px แม้ว่าจะเกินช่วงนี้ 960px พื้นที่ 1024px ยังคงเป็นที่ตั้งของร่างกายหลัก

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

วิธีรับ ViewPorts เค้าโครงบนเทอร์มินัลมือถือ: document.documentElement.clientWidth (โดยปกติ 980px, iPad Pro คือ 1024px)

หมายเหตุ: หลังจากที่การรับชมเค้าโครงถูกบีบอัดความกว้างแนวนอนจะไม่ 375px อีกต่อไป แต่ 980px เนื่องจากวิวพกพาเลย์เอาต์ถูกบีบอัดไม่ได้ถูกดักจับ

2. Visual Viewport

Visual Viewport เป็นพื้นที่ที่ผู้ใช้มองเห็นได้ ความกว้างสัมบูรณ์ของมันนั้นกว้างพอ ๆ กับหน้าจออุปกรณ์ แต่ค่าของพิกเซล CSS ที่มีอยู่ในความกว้างนี้จะแตกต่างกันไป ตัวอย่างเช่น: โดยทั่วไปแล้วโทรศัพท์มือถือจะใส่พิกเซล CSS 980 ตัวลงใน Visual Viewport (Visual Viewport Size = ขนาดวิวพอร์ต Layout) ในขณะที่ iPad Pro จะใส่ 1024 CSS Pixels ลงใน Visual Viewport

วิธีการรับ Visual Viewport บนเทอร์มินัลมือถือ: window.innerWidth แต่ไม่สามารถได้รับอย่างถูกต้องใน Android 2, Opera Mini และ UC8 (โดยทั่วไปแล้ว Visual Viewport จะไม่ถูกดูผ่านรหัส)

หากคุณใช้ iPhone 6 เป็นตัวอย่างให้อธิบายหน้าจอ:

1. พิกเซลทางกายภาพ: 750px
2. อุปกรณ์อิสระพิกเซล: 375px
3. CSS Pixel: 980px => มุมมองเลย์เอาต์ของ 980px ถูกบีบอัดลงในหน้าจอ

3. Visual Visual Visual Visual Visual

มุมมองเค้าโครงที่เท่ากับความกว้างของหน้าจอ (dp/dip) เรียกว่าวิวพอร์ตในอุดมคติดังนั้นจึงสามารถกล่าวได้ว่าวิวพอร์ตในอุดมคติเป็นมาตรฐาน: ความกว้างของวิวพัศจะต้องมองเห็นและหน้าจอ (DP/DIP) ทำได้โดยแท็กเมตา

• คุณสมบัติของ Viewport ในอุดมคติ:

1. มุมมองเค้าโครงและหน้าจอมีความกว้างเท่ากัน นำ iPhone6 ​​เป็นตัวอย่างหลังจากผ่านมาตรฐานวิวพอร์ตในอุดมคติ:

• อุปกรณ์อิสระพิกเซล: 375px
• Layout Viewport Width: 375px

2. ผู้ใช้สามารถดูเนื้อหาทั้งหมดของเว็บไซต์โดยไม่ต้องปรับขนาดหรือเลื่อน
3. เว็บไซต์มือถือควรได้รับการออกแบบแยกต่างหากสำหรับอุปกรณ์มือถือ

วิธีการเฉพาะในการตั้งค่าวิวพอร์ตในอุดมคติ:

 < meta name =" viewport " content =" width=device-width " >

【สรุป】:

• อย่าเขียนเมตาแท็ก (ไม่ตรงตามมาตรฐานมุมมองในอุดมคติ):

1. คำอธิบายหน้าจอ: พิกเซลทางกายภาพ: 750p ×, อุปกรณ์อิสระพิกเซล: 375px, CSS พิกเซล: 980px 2. ข้อดี: ผลการเรนเดอร์ขององค์ประกอบบนอุปกรณ์ต่าง ๆ เกือบจะเหมือนกันเพราะพวกเขาถูกปรับขนาดโดยคอนเทนเนอร์เลย์เอาต์เช่น 200 กล่องกว้าง: 200/980 3. ข้อเสีย: องค์ประกอบเล็กเกินไปข้อความหน้าไม่ชัดเจนและประสบการณ์การใช้งานไม่ดี

• เขียนเมตาแท็ก (สอดคล้องกับมาตรฐานวิวพอร์ตในอุดมคติ):

1. หน้าจอคำอธิบาย: พิกเซลทางกายภาพ: 750px, อุปกรณ์อิสระพิกเซล: 375px, CSS พิกเซล: 375px 2. ข้อดี: หน้าจะปรากฏขึ้นอย่างชัดเจนเนื้อหาไม่เล็กเท่าที่ควรสังเกตและประสบการณ์ของผู้ใช้ดีกว่า 3. ข้อเสีย: องค์ประกอบเดียวกันมีเอฟเฟกต์การแสดงผลที่แตกต่างกันบนหน้าจอที่แตกต่างกัน (อุปกรณ์) ตัวอย่างเช่นกล่อง 375 กว้าง: 375/375 และ 375/414 (ไม่ใช่การแสดงผลที่เท่ากันกับเทียบเท่า) 4. วิธีการแก้ปัญหา: ทำการปรับตัว

(v) ซูม

ซูมด้านข้างพีซี

เมื่อซูมเข้า:

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

ลดขนาด:

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

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

การตรวจสอบสคริปต์:

 console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
  console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} 

ซูมมือถือ

เมื่อซูมเข้า:

• มุมมองเลย์เอาต์ยังคงไม่เปลี่ยนแปลง
• Visual Viewport มีขนาดเล็กลง (ซอฟต์แวร์จำลองระยะห่างระหว่างโทรศัพท์มือถือและดวงตามนุษย์จะยาวขึ้นดังนั้นช่วงภาพภายในโทรศัพท์มือถือจะเล็กลงและเนื้อหามีขนาดใหญ่ขึ้น) ลดขนาด:
• มุมมองเลย์เอาต์ยังคงไม่เปลี่ยนแปลง
• Visual Viewport มีขนาดใหญ่ขึ้น (ซอฟต์แวร์จำลองว่าระยะห่างระหว่างโทรศัพท์มือถือและดวงตามนุษย์จะใกล้เข้ามาดังนั้นช่วงการมองเห็นภายในโทรศัพท์มือถือจะใหญ่ขึ้นและเนื้อหาจะเล็กลง)

หมายเหตุ: การปรับสเกลมือถือจะไม่ส่งผลกระทบต่อเค้าโครงหน้าเนื่องจากขนาดของวิวพอร์ตเค้าโครงไม่เปลี่ยนแปลงระหว่างการปรับขนาด

2. วิวพอร์ต

Tag Meta-Viewport ได้รับการแนะนำโดย Apple ในปี 2550 เพื่อควบคุมการรับชมเค้าโครงมือถือโดยพยายามเปลี่ยนกฎอุตสาหกรรมของ Viewport โครงร่าง 980 ตัวเลือกที่เกี่ยวข้องกับวิวพอร์ต:

1. ความกว้างของเค้าโครงความกว้างของวิวพอร์ต
2. การปรับขนาดเริ่มต้นของระบบเริ่มต้น
3. ระดับสูงสุดช่วยให้ผู้ใช้สามารถปรับขนาดได้สูงสุด [Safari ไม่รองรับ]
4. ระดับต่ำสุดช่วยให้ผู้ใช้สามารถปรับขนาดขั้นต่ำได้
5. ไม่ว่าผู้ใช้จะสามารถปรับขนาดได้หรือไม่ [Safari ไม่รองรับ]
6. ตั้งค่า Viewport-Fit เพื่อครอบคลุมมูลค่าสามารถแก้ปัญหาของพื้นที่สีขาวบนหน้าจอรอย

1. ความกว้าง

ค่าความกว้างอาจเป็นความกว้างของอุปกรณ์หรือค่าเฉพาะ แต่โทรศัพท์ Android บางรุ่นไม่รองรับค่าที่เฉพาะเจาะจงและชุดเต็ม iOS รองรับ

2. ระดับเริ่มต้น

1. อัตราส่วนการปรับขนาดเมื่อเริ่มต้นหน้าเว็บ
2. ระดับเริ่มต้น = ความกว้างของหน้าจอ (พิกเซลอิสระจุ่ม, จุ่ม) / ความกว้างวิวพอร์ตเค้าโครง
3. เฉพาะการเขียนระดับเริ่มต้น = 1.0 เท่านั้นที่สามารถบรรลุวิวพอร์ตที่สมบูรณ์แบบ แต่เพื่อความเข้ากันได้ที่ดีกว่าโดยทั่วไป width=device-width, initial-scale=1.0 จะถูกเขียนเข้าด้วยกัน

3. สูงสุด

ระดับสูงสุดที่อนุญาตสำหรับการปรับขนาดของผู้ใช้ [Safari ไม่รองรับ] ความกว้างสูงสุด = ความกว้างของหน้าจอ (พิกเซลอิสระจุ่ม) / ความกว้างของ Visual Viewport

4. ระดับต่ำสุด

มาตราส่วนสูงสุดที่ช่วยให้ผู้ใช้สามารถปรับขนาดความกว้างขั้นต่ำ = หน้าจอ (พิกเซลอิสระจุ่ม, จุ่ม) / ความกว้างของ Visual Viewport

5. ผู้ใช้สามารถลดขนาดได้

ไม่ว่าจะอนุญาตให้ผู้ใช้ซูมหน้าผ่านนิ้วของพวกเขา [Safari ไม่รองรับ]

6. Viewport-Fit

การตั้งค่าให้ครอบคลุมสามารถแก้ปัญหาพื้นที่สีขาวใน [Notch Screen]

• การใช้งานขั้นพื้นฐานของเทอร์มินัลมือถือทั่วไป:

 < meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >

iii. การปรับตัว

1. ทำไมคุณต้องปรับตัว? เนื่องจากขนาดหน้าจอที่แตกต่างกันของอุปกรณ์มือถือจะมี: องค์ประกอบเดียวกันจะแสดงเอฟเฟกต์ที่แตกต่างกันในโทรศัพท์สองเครื่องที่แตกต่างกัน (สัดส่วนที่แตกต่างกัน) หากองค์ประกอบเดียวกันแสดงบนอุปกรณ์ต่าง ๆ จะต้องปรับเปลี่ยน ไม่ว่าจะใช้วิธีการปรับตัวใดหลักการสำคัญคือ: การเปรียบเทียบที่เท่าเทียมกัน!

มีวิธีการปรับตัวหลักสามวิธี:

• การดัดแปลงวิวพอร์ต
• REM Adaptation (วิธีหลักการปรับตัวเกือบสมบูรณ์แบบ)
• การปรับตัว VW

1. การดัดแปลงวิวพอร์ต

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

2. การปรับตัวใหม่

em และ rem

EM และ REM เป็นทั้งหน่วยความยาวใน CSS และทั้งคู่เป็นหน่วยความยาวสัมพัทธ์ แต่ทั้งสองแตกต่างกันเล็กน้อย

• EM สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลัก
• REM เป็นหลักการของการปรับขนาดตัวอักษรขององค์ประกอบรูท: เมื่อเขียนสไตล์ REM จะใช้เป็นหน่วยและขนาดตัวอักษรรูทจะถูกปรับแบบไดนามิกบนอุปกรณ์ต่าง ๆ

โซลูชัน REM 1: หลักการหลัก

ภายใต้ Viewport ในอุดมคติร่างการออกแบบ (DIP คือ 375px) ใช้เป็นมาตรฐานและตัวอักษรรูทคือ 100px เพื่อให้ตรงกับการจุ่มอุปกรณ์อื่น ๆ

1. ขนาดตัวอักษรรูท = ค่าพิกเซลอิสระสำหรับโทรศัพท์มือถืออุปกรณ์แนวนอน/ความกว้างการออกแบบ* 100 px
2. เมื่อเขียนสไตล์:
   • โดยตรงใน rem
   • ค่า = การออกแบบร่างมูลค่า/100

โซลูชัน REM 2: หลักการหลัก

ในมุมมองที่เหมาะสม

1. ขนาดตัวอักษรรูท = ค่าพิกเซลอิสระสำหรับอุปกรณ์ภูมิทัศน์มือถือ/10
2. เมื่อเขียนสไตล์:
   • โดยตรงใน rem
   • value = Design Draft Value* (10/DIP)
3. โซลูชันนี้จะอยู่ยงคงกระพันร่วมกับน้อยลง

3.VW Adaptation (เปอร์เซ็นต์)

1 VW = 1% ของความกว้างของมุมมองพอร์ตพอร์ต 2 VH = 1% ของความสูง Viewport เค้าโครง

ดูความเข้ากันได้: caniuse.com

4. เส้นขอบพิกเซลทางกายภาพ (รู้เท่านั้น)

1px ในหน้าจอ HD สอดคล้องกับพิกเซลทางกายภาพมากขึ้น (หลอดไฟขนาดเล็ก) ดังนั้นเส้นขอบ 1 พิกเซลจึงดูหนาขึ้น การแก้ปัญหามีดังนี้:

 @media screen and ( -webkit-min-device-pixel-ratio : 2 ){
      # demo {
        border : solid 0.5 px black;
      }
    }
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
  # demo {
    border : solid 0.333 px black;
  }
}

4. กิจกรรมมือถือ

1. ประเภทเหตุการณ์

รายการกิจกรรมมือถือ

• ทริกเกอร์เมื่อเริ่มต้นองค์ประกอบ TouchStart
• ทริกเกอร์เมื่อสัมผัสองค์ประกอบทัช
• Touchend Triggers เมื่อนิ้วออกจากองค์ประกอบ
• TouchCancel ทริกเกอร์เมื่อการสัมผัสถูกขัดจังหวะ (เช่นหน้าต่างป๊อปอัพการโทรเข้า ฯลฯ )

เหตุการณ์ข้างต้นปรากฏตัวครั้งแรกใน iOS Safari เพื่อถ่ายทอดข้อมูลพิเศษบางอย่างไปยังนักพัฒนา

2. สถานการณ์แอปพลิเคชัน

• เหตุการณ์ TouchStart สามารถใช้สำหรับการโต้ตอบของการสัมผัสองค์ประกอบเช่นการกระโดดหน้าและการสลับแท็บ
• TouchMove สามารถใช้สำหรับเอฟเฟกต์การเลื่อนหน้าเว็บเกมและ artboards
• Touchend ส่วนใหญ่จะใช้ร่วมกับกิจกรรม TouchMove
• อัตราการใช้งาน TouchCancel ไม่สูง

สังเกต:

• หลังจากเหตุการณ์ TouchMove ถูกกระตุ้นเหตุการณ์ TouchMove จะยังคงยิงต่อไปแม้ว่านิ้วจะออกจากองค์ประกอบ
• ลองใช้งาน TouchMove และ Touchend Events ให้แน่ใจว่าได้ทริกเกอร์ TouchStart ก่อน
• ฟังก์ชั่นของเหตุการณ์คือการตระหนักถึงการโต้ตอบอินเทอร์เฟซบนเทอร์มินัลมือถือ

3. คลิกเพื่อเจาะ touch => คลิก

หลังจากเหตุการณ์การสัมผัสเสร็จสิ้นเหตุการณ์การคลิกขององค์ประกอบจะถูกทริกเกอร์ตามค่าเริ่มต้น หากไม่ได้ตั้งวิวพอร์ตที่สมบูรณ์แบบช่วงเวลาสำหรับเหตุการณ์จะอยู่ที่ประมาณ 300ms หากมีการตั้งค่าวิวพอร์ตที่สมบูรณ์แบบช่วงเวลาประมาณ 30ms (ขึ้นอยู่กับลักษณะของอุปกรณ์เฉพาะ)

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

วิธีแก้ปัญหา 1

บล็อกพฤติกรรมเริ่มต้น

 btn . addEventListener ( 'touchend' , ( event ) => {
      event . preventDefault ( )
      shade . style . display = 'none'
    } ) 

วิธีแก้ปัญหา 2

ทำให้องค์ประกอบเบื้องหลังไม่มีลักษณะการคลิกและแก้ไขให้เป็นแท็ก Div ปกติ:

    < div id =" baidu " >点我去百度</ div >

ใช้เหตุการณ์ Touchend และคลิกเพื่อข้ามไปยังหน้าเว็บใหม่

 baidu . addEventListener ( 'touchend' , ( ) => {
  window . location . href = 'https://www.baidu.com'
} ) 

วิธีแก้ปัญหา 3

ใช้แอตทริบิวต์เหตุการณ์ตัวชี้ใน CSS เพื่อสูญเสียเหตุการณ์คลิกชั่วคราวและกู้คืนหลังจาก 300 มิลลิวินาที:

 # baidu {
      display : block;
      width : 100 % ;
      height : 300 px ;
      background-color : skyblue;

      pointer-events : none; 
    }

    btn . addEventListener ( 'touchend' , ( ) => {
      shade . style . display = 'none'
      setTimeout ( ( ) => {
        baidu . style . pointerEvents = 'auto' // 恢复正常
      } , 300 ) ;
    } ) 

วิธีแก้ปัญหา 4

ปล่อยให้องค์ประกอบที่ซ่อนอยู่ล่าช้าประมาณ 300 มิลลิวินาทีก่อนซ่อนไว้

 btn . addEventListener ( 'touchend' , ( ) => {
      setTimeout ( ( ) => {
        shade . style . display = 'none'
      } , 300 ) ;
    } ) 

5. การเจาะอินทราเน็ต

1. ชาวนิวเคลียส
2. ปลั๊กอิน Utools