ฉันกำลังเล่นกับคำถามเกี่ยวกับสื่อและเริ่มพัฒนาสำหรับหน้าจอมือถือ ฉันมีหน้าแรกค่อนข้างจะเป็นที่ต้องการ แต่กลับได้รับแถบเลื่อนแนวนอนที่ด้านล่างเมื่อฉันปรับขนาดหน้าจอเป็น ‹480px ฉันยังไม่ได้ทดสอบสิ่งนี้บนอุปกรณ์มือถือ แต่ฉันคิดว่าข้อผิดพลาดเดียวกันนี้จะปรากฏขึ้น
เว็บไซต์คือ: http://brad.sebdengroup.com/newOdynSite/index.php
หากต้องการสร้างข้อผิดพลาดขึ้นใหม่ ให้เปิดไซต์ ปรับขนาดหน้าต่างเป็น ‹480px และเลื่อนแนวตั้งไปที่ด้านล่าง
นี่คือปัญหา:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
การรวมกันของกฎ CSS นี้จะสร้างองค์ประกอบที่ใหญ่กว่าความกว้างของหน้า ความกว้าง 100% ไม่รวมช่องว่างใดๆ ที่ใช้โดยการขยาย เส้นขอบ หรือระยะขอบ ตัวอย่างเช่น หากความกว้างของหน้าคือ 480px ความกว้างขององค์ประกอบจะเป็น 20px + 480px + 20px = 520px
เพื่อหลีกเลี่ยงปัญหานี้ ให้ลองรวมเนื้อหาไว้ในแท็กเพิ่มเติม เพื่อให้สามารถใช้ความกว้างและช่องว่างภายในกับองค์ประกอบที่แยกจากกัน และปรับแต่ง CSS ตามความจำเป็น ตัวอย่างเช่น:
<span><strong>What have we done?</strong></span>
คุณสามารถลองใช้ overflow-x: Hidden; บน ‹body› เพื่อซ่อนแถบเลื่อน อย่างไรก็ตาม คุณจะไม่สามารถดูเนื้อหาภายนอกพอร์ตมุมมองได้อย่างง่ายดาย
สำหรับอุปกรณ์เคลื่อนที่ คุณสามารถใช้คิวรีสื่อเพื่อระบุสไตล์ชีตได้:
<link rel="stylesheet" href="/thstyles/mobile.css" media="only screen and (max-device-width: 480px)">
หรือคุณสามารถใช้องค์ประกอบ ‹meta›:
<meta name="viewport" content="width=device-width, user-scalable=no">
