WebView ที่แสดงผลได้อย่างสมบูรณ์

เผยแพร่: 28 กุมภาพันธ์ 2014

คุณมีตัวเลือกมากมายในการสร้างอินเทอร์เฟซที่สมบูรณ์แบบสําหรับ WebView

ตั้งค่าเมตาแท็ก Viewport

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

หากต้องการให้ความกว้างของเว็บไซต์เท่ากับ 100% ของความกว้างของ WebView ให้ตั้งค่าเมตาแท็กวิวพอร์ต ดังนี้

<meta name="viewport" content="width=device-width, initial-scale=1">

ตั้งค่าความกว้างเป็นค่าพิเศษ device-width เพื่อให้ควบคุมเลย์เอาต์หน้าเว็บได้มากขึ้น

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

แสดงเว็บไซต์เวอร์ชันเดสก์ท็อป

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

• setUseWideViewPort(true)
• setLoadWithOverviewMode(true)

หากไม่ได้ตั้งค่าวิธีการเหล่านี้และไม่ได้ระบุวิวพอร์ต WebView จะพยายามตั้งค่าความกว้างของวิวพอร์ตตามขนาดเนื้อหา

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

ใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

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

การออกแบบที่ตอบสนองตามอุปกรณ์ใช้งานได้หลายวิธี หนึ่งในคำค้นหาที่ใช้กันมากที่สุดคือคำค้นหา @media ซึ่งจะใช้ CSS กับองค์ประกอบตามลักษณะของอุปกรณ์

เช่น สมมติว่าคุณต้องการเปลี่ยนจากเลย์เอาต์แนวตั้งเป็นเลย์เอาต์แนวนอนตามการวางแนว ตั้งค่าพร็อพเพอร์ตี้ CSS เป็นแนวตั้งโดยค่าเริ่มต้น

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

หากต้องการเปลี่ยนเป็นเลย์เอาต์แนวนอน ให้เปลี่ยนพร็อพเพอร์ตี้ flex-direction ตามการวางแนว ดังนี้

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

นอกจากนี้ คุณยังเปลี่ยนเลย์เอาต์ตามความกว้างของหน้าจอได้ด้วย

เช่น การปรับขนาดความกว้างของปุ่มจาก 100% ให้เล็กลงเมื่อขนาดหน้าจอจริงมีขนาดใหญ่ขึ้น

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

การเปลี่ยนแปลงเหล่านี้เป็นการเปลี่ยนแปลงเล็กน้อย แต่ Media Query จะช่วยให้คุณเปลี่ยนแปลงลักษณะที่ปรากฏของแอปพลิเคชันได้มากกว่าเดิม โดยไม่ทำให้ HTML เหมือนเดิม ทั้งนี้ขึ้นอยู่กับ UI ของคุณ

รูปภาพคมชัด

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

เคล็ดลับและคำแนะนำบางส่วนที่จะช่วยให้รูปภาพคมชัดบนหน้าจอทุกประเภทมีดังนี้

• ใช้ CSS สําหรับเอฟเฟกต์ที่ปรับขนาดได้
• ใช้กราฟิกเวกเตอร์
• ระบุรูปภาพที่มีความละเอียดสูง

ใช้ CSS สําหรับเอฟเฟกต์ที่ปรับขนาดได้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ First Contentful Paint (FCP) ซึ่งจะวัดเวลาตั้งแต่ที่ผู้ใช้ไปยังหน้าเว็บเป็นครั้งแรกจนถึงเวลาที่เนื้อหาส่วนใดส่วนหนึ่งของหน้าแสดงบนหน้าจอ "เนื้อหา" หมายถึงข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) องค์ประกอบ <svg> และองค์ประกอบ <canvas> ที่ไม่ใช่สีขาว

ใช้ภาพกราฟิกเวกเตอร์

กราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นวิธีที่ยอดเยี่ยมในการนำเสนอรูปภาพที่ปรับขนาดได้ สำหรับรูปภาพที่เหมาะกับกราฟิกเวกเตอร์ SVG จะแสดงรูปภาพคุณภาพสูงที่มีขนาดไฟล์เล็กมาก

ระบุรูปภาพที่มีความละเอียดสูง

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

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

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

การควบคุมแบบละเอียด

ในหลายกรณี คุณจะใช้รูปภาพเดียวกับอุปกรณ์ทั้งหมดไม่ได้ ในกรณีนี้ คุณจะเลือกรูปภาพที่แตกต่างกันตามขนาดและความหนาแน่นของหน้าจอได้ ใช้ Media Query เพื่อเลือกภาพพื้นหลังตามขนาดและความหนาแน่นของหน้าจอ

คุณสามารถใช้ JavaScript เพื่อควบคุมวิธีโหลดรูปภาพได้ แต่วิธีนี้จะทำให้เกิดความซับซ้อน

การค้นหาสื่อและความหนาแน่นของหน้าจอ

หากต้องการเลือกรูปภาพตามความหนาแน่นของหน้าจอ คุณต้องใช้หน่วย dpi หรือ dppx ใน Media Query หน่วย dpi แสดงถึงจุดต่อนิ้ว CSS และ dppx แสดงถึงจุดต่อพิกเซล CSS

คุณจะเห็นความสัมพันธ์ระหว่าง dpi กับ dppx ในตารางต่อไปนี้

Android จะกำหนดกลุ่มความหนาแน่นของหน้าจอทั่วไปและใช้ที่อื่นๆ เพื่อแสดงความหนาแน่นของหน้าจอ (เช่น https://screensiz.es)

ภาพพื้นหลัง

คุณสามารถใช้ Media Query เพื่อกำหนดรูปภาพพื้นหลังให้กับองค์ประกอบได้ ตัวอย่างเช่น หากคุณมีรูปภาพโลโก้ขนาด 256 x 256 พิกเซลในอุปกรณ์ที่มีสัดส่วนพิกเซล 1.0 คุณอาจใช้กฎ CSS ต่อไปนี้

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

หากต้องการเปลี่ยนรูปภาพนี้เป็นรูปภาพขนาดใหญ่ขึ้นในอุปกรณ์ที่มีอัตราส่วนพิกเซลของอุปกรณ์ 1.5 (hdpi) และ 2.0 (xhdpi) ให้เพิ่มกฎต่อไปนี้

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

จากนั้นคุณสามารถผสานเทคนิคนี้เข้ากับการค้นหาสื่ออื่นๆ เช่น min-width ซึ่งมีประโยชน์เมื่อคุณพิจารณาถึงรูปแบบต่างๆ

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

คุณอาจสังเกตเห็นว่า max-height และ max-width มีการตั้งค่าเป็น 512 พิกเซลสำหรับความละเอียด 2ddpx โดยมีรูปภาพขนาด 1024x1024 พิกเซล เนื่องจาก "พิกเซล" ของ CSS จะพิจารณาสัดส่วนพิกเซลของอุปกรณ์ (512 พิกเซล * 2 = 1024 พิกเซล)

แล้ว <img/> ล่ะ

เว็บในปัจจุบันยังไม่มีวิธีแก้ปัญหานี้ มีคำเสนอบางอย่าง แต่คำเสนอเหล่านั้นไม่พร้อมใช้งานในเบราว์เซอร์ปัจจุบันหรือใน WebView

ในระหว่างนี้ หากคุณสร้าง DOM ใน JavaScript คุณสามารถสร้างแหล่งข้อมูลรูปภาพได้หลายรายการในโครงสร้างไดเรกทอรีที่รอบคอบ ดังนี้

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

จากนั้นใช้อัตราส่วนพิกเซลเพื่อพยายามดึงรูปภาพที่เหมาะสมที่สุด

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

หรือจะเปลี่ยน URL พื้นฐานของหน้าเว็บเพื่อกำหนด URL แบบสัมพัทธ์สำหรับรูปภาพก็ได้

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

แนวทางนี้จะบล็อกการโหลดหน้าเว็บและบังคับให้ใช้เส้นทางแบบสัมบูรณ์สำหรับทรัพยากรทั้งหมด เช่น รูปภาพ สคริปต์ และไฟล์ CSS เนื่องจาก URL พื้นฐานชี้ไปยังไดเรกทอรีเฉพาะความหนาแน่น