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