ความคิดเห็น: ด้วยความนิยมของโทรศัพท์มือถือระดับไฮเอนด์ (Andriod, iPhone, iPod, Winphone ฯลฯ ) การพัฒนาแอปพลิเคชันอินเทอร์เน็ตบนมือถือยังได้รับความสนใจจากผู้คนมากขึ้นเรื่อย ๆ การใช้ HTML5 เพื่อพัฒนาแอพพลิเคชั่นมือถือเป็นตัวเลือกที่ดีที่สุด อย่างไรก็ตามโทรศัพท์แต่ละเครื่องมีความละเอียดและขนาดหน้าจอที่แตกต่างกัน แอปพลิเคชันหรือขนาดหน้าเว็บที่เราพัฒนาได้นั้นเหมาะสำหรับใช้ในโทรศัพท์ระดับไฮเอนด์ต่างๆได้อย่างไร เรียนรู้ HTML5 Viewport
VIYPORT SYNTAX บทนำ:
<!- เอกสาร HTML->
<meta name = viewport
เนื้อหา =
ความสูง = [pixel_value | ความสูงของอุปกรณ์]
Width = [Pixel_value | ความกว้างของอุปกรณ์]
ระดับเริ่มต้น = float_value
ระดับต่ำสุด = float_value
ระดับสูงสุด = float_value
ผู้ใช้สามารถลดขนาดได้ = [ใช่ | เลขที่] ,
Target-DensityDpi = [DPI_VALUE | Device-DPI | High-DPI | Medium-DPI | ต่ำ DPI]
-
พารามิเตอร์คำอธิบาย:
ความกว้าง
—— ควบคุมขนาดของ Viewport ซึ่งสามารถระบุได้ว่าเป็นค่าหรือค่าพิเศษเช่นความกว้างของอุปกรณ์ซึ่งเป็นความกว้างของอุปกรณ์ (หน่วยของพิกเซลของ CSS เมื่อปรับขนาดเป็น 100%
ความสูง
—— สอดคล้องกับความกว้างระบุความสูง
เป้าหมาย DensityDPI
—— ความหนาแน่นของพิกเซลหน้าจอถูกกำหนดโดยความละเอียดของหน้าจอและมักจะถูกกำหนดเป็นจำนวนจุดต่อนิ้ว (DPI) Android รองรับความหนาแน่นพิกเซลสามหน้าจอ: ความหนาแน่นพิกเซลต่ำความหนาแน่นพิกเซลขนาดกลางและความหนาแน่นพิกเซลสูง หน้าจอความหนาแน่นพิกเซลต่ำมีพิกเซลน้อยกว่าต่อนิ้วในขณะที่หน้าจอความหนาแน่นพิกเซลสูงมีพิกเซลต่อนิ้วมากขึ้น เบราว์เซอร์ Android และ WebView มีความหนาแน่นพิกเซลขนาดกลางตามค่าเริ่มต้น
ด้านล่างคือช่วงค่าของแอตทริบิวต์ความหนาแน่นเป้าหมาย
Device-DPI: ใช้ DPI ดั้งเดิมของอุปกรณ์เป็นเป้าหมาย DP การซูมเริ่มต้นไม่เกิดขึ้น
High-DPI: ใช้ HDPI เป็นเป้าหมาย DPI อุปกรณ์ความหนาแน่นพิกเซลขนาดกลางและต่ำจะลดลงตามลำดับ
Medium-DPI: ใช้ MDPI เป็นเป้าหมาย DPI อุปกรณ์ความหนาแน่นพิกเซลสูงจะถูกขยายให้เหมาะสมและอุปกรณ์ความหนาแน่นของพิกเซลจะลดลงตามลำดับ นี่คือความหนาแน่นของเป้าหมายเริ่มต้น
ต่ำ DPI: ใช้ MDPI เป็นเป้าหมาย DPI อุปกรณ์ความหนาแน่นพิกเซลขนาดกลางและสูงจะถูกขยายให้เหมาะสม
<value>: ระบุค่า DPI เฉพาะเป็นเป้าหมาย DPI ช่วงของค่านี้จะต้องอยู่ระหว่าง 70–400
<!- เอกสาร HTML->
<meta name = viewport content = target-densityDpi = device-dpi />>
<meta name = viewport content = target-densityDpi = สูง dpi />
<meta name = viewport content = target-densitydpi = medium-dpi />>
<meta name = viewport content = target-densityDpi = ต่ำ dpi />
<meta name = viewport content = target-densityDpi = 200″ />
เพื่อป้องกันเบราว์เซอร์ Android และ WebView จากการปรับขนาดหน้าของคุณตามความหนาแน่นของพิกเซลของหน้าจอที่แตกต่างกันคุณสามารถตั้งค่าความหนาแน่นของเป้าหมายของ Viewport ไปยัง Device-DPI เมื่อคุณทำเช่นนี้หน้าจะไม่ปรับขนาด แต่หน้าจะแสดงขึ้นอยู่กับความหนาแน่นของพิกเซลของหน้าจอปัจจุบัน ในกรณีนี้คุณต้องกำหนดความกว้างของวิวพอร์ตเพื่อให้ตรงกับความกว้างของอุปกรณ์เพื่อให้หน้าเว็บของคุณสามารถปรับให้เข้ากับหน้าจอได้
ระดับเริ่มต้น
—— การปรับสเกลแบบ initial นั่นคือระดับการซูมเริ่มต้นของหน้า นี่คือค่าจุดลอยตัวซึ่งเป็นตัวคูณขนาดหน้า ตัวอย่างเช่นหากคุณตั้งค่าการปรับสเกลเริ่มต้นเป็น 1.0 หน้าเว็บจะแสดงด้วยความละเอียด 1: 1 ของความหนาแน่นเป้าหมาย หากคุณตั้งค่าเป็น 2.0 หน้านี้จะขยายเป็น 2x
ระดับสูงสุด
—— การซูมสูงสุด นั่นคือระดับการปรับระดับสูงสุดที่อนุญาต นี่คือค่าจุดลอยตัวที่ระบุตัวคูณสูงสุดของขนาดหน้าเมื่อเทียบกับขนาดหน้าจอ ตัวอย่างเช่นหากคุณตั้งค่านี้เป็น 2.0 หน้านี้สามารถขยายได้สูงสุด 2 เท่าเมื่อเทียบกับขนาดเป้าหมาย
ผู้ใช้ได้
—— ผู้ใช้ปรับการซูม นั่นคือไม่ว่าผู้ใช้จะสามารถเปลี่ยนระดับการซูมหน้าได้หรือไม่ หากตั้งค่าเป็นใช่ผู้ใช้จะอนุญาตให้เปลี่ยนได้มิฉะนั้นจะไม่ใช่ ค่าเริ่มต้นคือใช่ หากคุณตั้งค่าเป็น NO ทั้งระดับต่ำสุดและระดับสูงสุดจะถูกละเว้นเนื่องจากการปรับขนาดไม่สามารถทำได้
ค่าการปรับขนาดทั้งหมดจะต้องอยู่ในช่วง 0.01–10
ตัวอย่าง: 1. ตั้งค่าความกว้างของหน้าจอเป็นความกว้างของอุปกรณ์ห้ามมิให้ผู้ใช้ปรับการซูมด้วยตนเองด้วยตนเอง
<meta name = viewport content = width = ความกว้างของอุปกรณ์, ผู้ใช้-scalable = no />
2. ตั้งค่าความหนาแน่นของหน้าจอเป็นการปรับสเกลอัตโนมัติของความถี่สูงความถี่กลางและความถี่ต่ำและห้ามมิให้ผู้ใช้ปรับการปรับขนาดด้วยตนเองด้วยตนเอง
<meta name = viewport content = width = ความกว้างของอุปกรณ์, densitydpi เป้าหมาย = สูง dpi, ระดับเริ่มต้น = 1.0, ระดับต่ำสุด = 1.0, ระดับสูงสุด = 1.0, ผู้ใช้-ลดขนาด = no/>