องค์ประกอบ HTML จะไม่เปลี่ยนความกว้างบน iPad pro เมื่อหมุนเป็นแนวนอน

เพื่อสาธิตปัญหานี้ ฉันมีหน้าเว็บที่เรียบง่ายซึ่งมีองค์ประกอบ div เดียวโดยตั้งค่าความกว้างเป็น 100% และมีสีพื้นหลังเพื่อตรวจสอบความกว้าง บนอุปกรณ์ส่วนใหญ่ที่ฉันเคยดูสิ่งนี้บน (พีซี สมาร์ทโฟน แท็บเล็ต) ทุกอย่างทำงานตรงตามที่คาดไว้ อย่างไรก็ตาม ฉันมี iPad pro 11 ที่จะแสดงหน้าอย่างถูกต้องในโหมดแนวตั้งใน Chrome:

โหมดแนวตั้ง

แต่เมื่อหมุนเป็นโหมดแนวนอน จะคงความกว้างเดิมเป็นพิกเซลและไม่ขยายเป็น 100% ของความกว้างใหม่:

โหมดแนวนอน

ฉันพยายามค้นหาปัญหานี้เป็นเวลาหลายชั่วโมง แต่ดูเหมือนจะไม่พบใครที่ตรงกับปัญหาของฉันเลย ฉันเจอคำตอบมากมายที่บอกว่าให้ทำการเปลี่ยนแปลงต่างๆ กับแท็ก ‹meta name=viewport ... /› ซึ่งทั้งหมดนี้ฉันพยายามแล้ว แต่ก็ไม่มีประโยชน์ เกือบจะเหมือนกับว่าการหมุนอุปกรณ์ไม่ได้บอกเบราว์เซอร์ว่าขนาดของวิวพอร์ตเปลี่ยนไป ฉันค่อนข้างใหม่กับการออกแบบเว็บไซต์ส่วนหน้าและใหม่มากกับการออกแบบที่ตอบสนองสำหรับอุปกรณ์มือถือ แต่ดูเหมือนว่าบางสิ่งที่เรียบง่ายอย่างสไตล์อินไลน์สำหรับความกว้าง 100% น่าจะเพียงพอสำหรับความต้องการของฉันที่นี่

ใครสามารถให้คำแนะนำได้บ้าง?

แก้ไข: ฉันค้นพบว่าฉันสามารถโหลดหน้าเว็บได้ในตอนแรกในโหมดแนวนอนและได้รับความกว้าง 100% ที่ต้องการ แต่เมื่อฉันหมุนเป็นแนวตั้ง ฉันมีปัญหาตรงกันข้าม - องค์ประกอบจะขยายไปทางขวาเลยขอบของหน้าจอ และอีกครั้งดูเหมือนว่าจะเกิดขึ้นกับ iPad รุ่นเฉพาะ (Pro 11) เท่านั้น


ios html ipad css responsive-design
person BradMJustice    schedule 15.09.2020    source แหล่งที่มา

คำตอบ (1)


arrow_upward
0
arrow_downward

เคล็ดลับของฉันในการทำให้เนื้อหา HTML ครอบครองทั้งหน้าในขณะที่เด็กๆ สามารถประพฤติตนอย่างรับผิดชอบได้คือ:

body { 
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}

จากนั้น div เด็กภายในร่างกายอาจเป็น:

div {
    background: red;
    height: 20px;
    width: 100%;
}

เคล็ดลับในที่นี้คือการทำให้ร่างกายตอบสนองต่อวิวพอร์ตของเบราว์เซอร์ และปล่อยให้เด็กๆ ไหลเข้าสู่ร่างกาย

เคล็ดลับ: พยายามทบทวนโมเดล Flex และ Grid ของ CSS3 ซึ่งเป็นบรรทัดฐานในปัจจุบัน และจะช่วยให้คุณใช้เค้าโครงที่ยืดหยุ่นได้

person Roman Jaquez    schedule 15.09.2020
comment
ขอบคุณสำหรับการตอบรับ! น่าเสียดายที่ฉันเพิ่มสไตล์เหล่านั้นและได้ผลลัพธ์เดียวกัน - person BradMJustice; 15.09.2020