ความละเอียดของเบราว์เซอร์สมาร์ทโฟน

ฉันแค่อยากรู้ว่าโทรศัพท์ Android คำนวณความละเอียดของหน้าเว็บที่ตอบสนองโดยเฉพาะอย่างไร ตัวอย่างเช่น ฉันรู้ว่าแม้ว่า iPhone 5s จะมีความละเอียดดั้งเดิมที่ 640x1136 แต่ความละเอียดที่ใช้สำหรับหน้าเว็บคือ 320x568 (ดังนั้นฉันจึงสามารถวัดองค์ประกอบการออกแบบของฉันได้ตามต้องการ - โดยทั่วไปแล้วฉันจะใช้เปอร์เซ็นต์ แต่บางครั้งฉันต้องวัดองค์ประกอบเป็นพิกเซล)

ดังนั้น เมื่อโทรศัพท์ Android เข้าชมเว็บไซต์ที่ออกแบบให้ตอบสนองและมีความละเอียดมาตรฐานที่ 1920x1080 องค์ประกอบใดบ้างบนหน้าเว็บที่แสดงผลในแง่ของขนาด มันคือ 1/2 ด้วยหรือเปล่า? หรือมันแตกต่างกันระหว่างอุปกรณ์?

การทดสอบที่ฉันทำไม่ได้ให้ความคิดที่ชัดเจนว่าเกิดอะไรขึ้น

ขอบคุณ!


mobile browser responsive-design smartphone
person alanvitek    schedule 20.06.2014    source แหล่งที่มา
comment
หากคุณใช้ Chrome คุณสามารถใช้โปรแกรมจำลองอุปกรณ์เครื่องมือนักพัฒนาเพื่อรับความละเอียดและอัตราส่วนพิกเซลของอุปกรณ์ต่างๆ คุณยังสามารถอ้างอิงรายการจอแสดงผลนี้ตามความหนาแน่นของพิกเซล: en.wikipedia.org/wiki/List_of_displays_by_pixel_density (ดูในคอลัมน์อัตราส่วนพิกเซล CSS)   -  person Sean Henderson    schedule 20.06.2014
comment
@SeanHenderson - นี่เป็นทรัพยากรที่ยอดเยี่ยมที่ฉันไม่รู้ว่ามีอยู่จริง! สิ่งนี้ทำให้ฉันคลายความลึกลับได้ว่า CSS ตีความมิติเหล่านี้อย่างไร ขอบคุณ   -  person alanvitek    schedule 24.06.2014

คำตอบ (1)


arrow_upward
0
arrow_downward

จากประสบการณ์ของผม โดยส่วนใหญ่คุณจะได้ผลลัพธ์ที่ต้องการหากคุณจัดโครงสร้างทุกอย่างถูกต้องและเน้นไปที่ความกว้างของอุปกรณ์

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

การจัดโครงสร้างอย่างถูกต้องหมายถึง:

(1) ในส่วนหัวของเอกสารของคุณมีเมตาแท็กของคุณ

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

คุณสามารถเลือกป้องกันการซูมด้วย

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

(2) ใน CSS ของคุณ ให้ใช้คำสั่งสื่อ เช่น

@media (max-width: 480px) {
  ...
}

@media (max-width: 767px) {
  ....
}

@media (min-width: 768px) and (max-width: 979px) {
  ...
}

@media (min-width: 1200px) {
  ...
}

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

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

ขอให้โชคดี!

person David Taiaroa    schedule 20.06.2014
comment
ฉันคิดว่าคุณทำได้ดีมากเมื่อคุณบอกว่ามันไม่ควรเกี่ยวกับอุปกรณ์ แต่เป็นบริบทของการออกแบบภายในพิกเซลที่กำหนด อันที่จริงเบรกพอยต์ไม่สำคัญในแง่ของอุปกรณ์และความละเอียด ขอบคุณ! - person alanvitek; 24.06.2014
comment
ขอบคุณ @alanvitek ฉันดีใจที่สิ่งนี้ช่วยชี้แจงสิ่งต่าง ๆ ให้กับคุณ - person David Taiaroa; 25.06.2014