แนวทางปฏิบัติที่ดีที่สุดสำหรับเว็บแอป

การพัฒนาหน้าเว็บและแอปพลิเคชันสำหรับโทรศัพท์มือถือมีความท้าทายที่แตกต่างกันเมื่อเทียบกับ การพัฒนาหน้าเว็บสำหรับเว็บเบราว์เซอร์บนเดสก์ท็อป แนวทางปฏิบัติต่อไปนี้ช่วยให้คุณ ที่มีประสิทธิภาพมากที่สุดสำหรับ Android และโทรศัพท์มือถืออื่นๆ

  1. เปลี่ยนเส้นทางอุปกรณ์เคลื่อนที่ไปยังเว็บไซต์เวอร์ชันสำหรับอุปกรณ์เคลื่อนที่โดยเฉพาะ โดยใช้การเปลี่ยนเส้นทางฝั่งเซิร์ฟเวอร์ วิธีหนึ่งที่ใช้กันโดยทั่วไปคือการ "ดม" เวลา สตริง User Agent ที่ระบุโดยเว็บเบราว์เซอร์ หากต้องการทราบว่า จะแสดงเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่หรือไม่ ให้มองหาไอคอน "อุปกรณ์เคลื่อนที่" ใน User Agent
  2. ใช้ HTML5 สำหรับอุปกรณ์เคลื่อนที่ HTML5 เป็นภาษามาร์กอัปที่นิยมใช้กันมากที่สุดสำหรับเว็บไซต์บนมือถือ มาตรฐานนี้สนับสนุนการพัฒนาเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรก เพื่อช่วยให้มั่นใจได้ว่าเว็บไซต์จะทำงานบน อุปกรณ์ HTML5 ใช้ <DOCTYPE> และ การประกาศ charset รายการ: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. ใช้ข้อมูลเมตาของวิวพอร์ตเพื่อปรับขนาดหน้าเว็บอย่างเหมาะสม ในเอกสาร <head> ระบุข้อมูลเมตาที่ระบุวิธีที่คุณต้องการให้วิวพอร์ตของเบราว์เซอร์ แสดงผลหน้าเว็บของคุณ ตัวอย่างเช่น ข้อมูลเมตาของวิวพอร์ตสามารถระบุความสูงและความกว้างของแท็ก วิวพอร์ตของเบราว์เซอร์ ขนาดหน้าเว็บเริ่มต้น และความหนาแน่นของหน้าจอเป้าหมาย

    ตัวอย่างต่อไปนี้แสดงวิธีการตั้งค่าข้อมูลเมตาของวิวพอร์ต

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

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

  4. ใช้เลย์เอาต์เชิงเส้นแนวตั้ง หลีกเลี่ยงไม่ให้ผู้ใช้ต้องเลื่อนไปทางซ้ายและขวา ไปยังส่วนต่างๆ ของหน้าเว็บ การเลื่อนขึ้นและลงจะง่ายขึ้นสำหรับผู้ใช้และทำให้หน้าเว็บง่ายขึ้น
  5. กำหนดความสูงและความกว้างของเลย์เอาต์เป็น match_parent การตั้งค่า ความสูงและความกว้างของวัตถุ WebView เป็น match_parent จะตรวจสอบว่าขนาดมุมมองของแอปถูกต้อง เราไม่แนะนำให้ตั้งค่า ความสูงเป็น wrap_content เนื่องจากทำให้เกิดการวัดขนาดที่ไม่ถูกต้อง ในทำนองเดียวกัน การตั้งค่าฟิลด์ ไม่รองรับความกว้างของเลย์เอาต์เป็น wrap_content และทำให้ WebView แสดง ใช้ความกว้างของหน่วยโฆษณาระดับบนแทน และจากลักษณะนี้ สิ่งสำคัญคือการตรวจสอบว่าไม่มี ของออบเจ็กต์เลย์เอาต์ระดับบนสุดของออบเจ็กต์ WebView มีการตั้งค่าความสูงและความกว้างเป็น wrap_content
  6. หลีกเลี่ยงคําขอไฟล์หลายรายการ เนื่องจากอุปกรณ์เคลื่อนที่มักมีความเร็วในการเชื่อมต่อ ช้ากว่าคอมพิวเตอร์เดสก์ท็อป ควรทำให้หน้าเว็บของคุณโหลดเร็วที่สุดเท่าที่จะเป็นไปได้ วิธีหนึ่งที่จะทำให้เร็วขึ้นคือการ หลีกเลี่ยงการโหลดไฟล์เพิ่มเติม เช่น สไตล์ชีตและไฟล์สคริปต์ใน <head> และอย่าลืมคำนึงถึง การวิเคราะห์บนอุปกรณ์เคลื่อนที่ที่มีประสิทธิภาพ PageSpeed Insights ของ Google เพื่อรับคำแนะนำในการเพิ่มประสิทธิภาพโดยละเอียดสำหรับแอปของคุณโดยเฉพาะ

แหล่งข้อมูลเพิ่มเติม