หน้านี้ได้รับการแปลโดย Cloud Translation API

รองรับหน้าจอแบบต่างๆ ในเว็บแอป

เนื่องจาก Android พร้อมใช้งานบนอุปกรณ์ ซึ่งมีขนาดหน้าจอและความหนาแน่นของพิกเซลที่หลากหลาย จะพิจารณาปัจจัยเหล่านี้ในการออกแบบเว็บของคุณด้วย เพื่อที่หน้าเว็บของคุณจะได้มีขนาดที่เหมาะสม WebView รองรับ DOM, CSS และเมตาแท็ก ที่ช่วยให้คุณแสดงผลเนื้อหาเว็บอย่างเหมาะสมได้

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

วิวพอร์ต: วิวพอร์ตคือพื้นที่สี่เหลี่ยมผืนผ้าซึ่งแสดงพื้นที่ที่ถอนออกได้สำหรับหน้าเว็บ คุณ สามารถระบุพร็อพเพอร์ตี้ของวิวพอร์ตได้หลายรายการ เช่น ขนาดและมาตราส่วนเริ่มต้น สิ่งสำคัญที่สุดคือ ความกว้างของวิวพอร์ต ซึ่งจะกำหนดจำนวนพิกเซลแนวนอนทั้งหมดที่ใช้ได้จากหน้าเว็บ Point of View - จำนวนพิกเซล CSS ที่ใช้ได้
ความหนาแน่นของหน้าจอ: คลาส WebView และเว็บเบราว์เซอร์ส่วนใหญ่ใน Android แปลงค่าพิกเซล CSS เป็นค่าพิกเซลที่ไม่ขึ้นกับความหนาแน่น ดังนั้นหน้าเว็บของคุณจะปรากฏในขนาดที่มองเห็นได้เท่ากับ หน้าจอความหนาแน่นปานกลางประมาณ 160 DPI แต่ถ้ากราฟิกเป็นองค์ประกอบสำคัญของ การออกแบบเว็บ ให้คำนึงถึงการปรับขนาดที่เกิดขึ้นบนความหนาแน่นระดับต่างๆ เช่น รูปภาพ ที่กว้าง 300 พิกเซลบนหน้าจอ 320 dpi ถูกปรับขนาดขึ้น และใช้พิกเซลจริงต่อ CSS ที่มากขึ้น พิกเซล ซึ่งอาจทําให้เกิดอาร์ติแฟกต์ต่างๆ เช่น การเบลอและการทำภาพแตก Android ยุบเพื่อความง่าย ความหนาแน่นของหน้าจอที่เล็กลงที่สุดในหมวดหมู่ทั่วไปไม่กี่หมวดหมู่ ได้แก่ เล็ก กลาง และใหญ่ เพื่อเรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับความหนาแน่นของหน้าจอ, อ่าน รองรับความหนาแน่นของพิกเซลในระดับต่างๆ

โปรดดูแหล่งข้อมูลที่เกี่ยวข้องต่อไปนี้

ระบุพร็อพเพอร์ตี้วิวพอร์ต

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

พบบ่อยที่สุด เว็บเบราว์เซอร์บน Android รวมถึง Chrome จะตั้งค่าวิวพอร์ตเป็นขนาดใหญ่โดยค่าเริ่มต้น โหมด_วิวพอร์ตแบบกว้าง_นี้กว้างประมาณ 980 พิกเซล หลายเบราว์เซอร์ยังซูมออกได้ไกลถึง โดยค่าเริ่มต้นเพื่อแสดงความกว้างของวิวพอร์ตแบบเต็ม ซึ่งเรียกว่า _overview mode_

หมายเหตุ: เมื่อหน้าเว็บแสดงผลใน WebView หน้าเว็บจะไม่ใช้วิวพอร์ตแบบกว้าง โดยค่าเริ่มต้น คุณสามารถเปิดใช้โหมดวิวพอร์ตแบบกว้างได้ด้วย setUseWideViewPort()

คุณสามารถกำหนดคุณสมบัติของวิวพอร์ตสำหรับหน้าเว็บ เช่น ความกว้างและการซูมเริ่มต้น โดยใช้แท็ก <meta name="viewport" ...> ในเอกสาร <head>

ไวยากรณ์ต่อไปนี้แสดงพร็อพเพอร์ตี้วิวพอร์ตที่รองรับทั้งหมดและประเภทค่า ที่ยอมรับแต่ละรายการ

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

ตัวอย่างเช่น แท็ก <meta> ต่อไปนี้ระบุว่าความกว้างของวิวพอร์ตตรงกัน ความกว้างของหน้าจออุปกรณ์และคุณสมบัติการย่อ/ขยายปิดอยู่:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

เมื่อเพิ่มประสิทธิภาพเว็บไซต์สำหรับอุปกรณ์เคลื่อนที่ คุณมักจะกำหนดความกว้างเป็น "device-width"เพื่อให้ขนาดพอดีกับทุกอุปกรณ์ จากนั้นใช้คำค้นหาสื่อ CSS เพื่อ ปรับเปลี่ยนเลย์เอาต์ให้เหมาะกับหน้าจอขนาดต่างๆ ได้อย่างยืดหยุ่น

ความหนาแน่นของอุปกรณ์เป้าหมายด้วย CSS

WebView รองรับ -webkit-device-pixel-ratio ซึ่งเป็นสื่อ CSS ที่ช่วยให้คุณสร้างรูปแบบสำหรับความหนาแน่นของหน้าจอที่เฉพาะเจาะจง ค่าที่คุณใช้กับ ฟีเจอร์ต้องเป็น 0.75, 1 หรือ 1.5 เพื่อบ่งบอกว่าสไตล์มีไว้สำหรับอุปกรณ์ที่มีต่ำ ปานกลาง หรือ หน้าจอความหนาแน่นสูงตามลำดับ

คุณสามารถสร้างสไตล์ชีตแยกต่างหากสำหรับความหนาแน่นแต่ละระดับได้ ดังนี้

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

หรือระบุรูปแบบต่างๆ ในสไตล์ชีตเดียว:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดการความหนาแน่นของหน้าจอที่แตกต่างกัน โดยเฉพาะรูปภาพ โปรดดู รูปภาพ DPI สูงสำหรับ และความหนาแน่นของพิกเซลแปรผัน

ความหนาแน่นของอุปกรณ์เป้าหมายด้วย JavaScript

WebView รองรับ window.devicePixelRatio ซึ่งเป็นพร็อพเพอร์ตี้ DOM ที่ ให้คุณค้นหาความหนาแน่นของอุปกรณ์ปัจจุบันได้ ค่าของพร็อพเพอร์ตี้นี้จะระบุการปรับขนาด ของอุปกรณ์ปัจจุบัน หากค่าของ window.devicePixelRatio คือ 1.0 จะถือว่าเป็นอุปกรณ์ที่มีความหนาแน่นปานกลางและไม่มีการใช้การปรับขนาดโดยค่าเริ่มต้น หาก ค่าคือ 1.5 จะถือว่าอุปกรณ์นี้เป็นอุปกรณ์ที่มีความหนาแน่นสูง และหน้าจะมีขนาด 1.5 เท่า "ค่าเริ่มต้น" หากค่าเป็น 0.75 ระบบจะถือว่าอุปกรณ์นั้นเป็นอุปกรณ์ความหนาแน่นต่ำและหน้า ปรับเป็น 0.75 เท่าโดยค่าเริ่มต้น

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

ตัวอย่างเช่น คุณค้นหาความหนาแน่นของอุปกรณ์ด้วย JavaScript ได้โดยทำดังนี้

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}