เนื่องจากคำถามนี้ยังคงมีผู้ดูอย่างต่อเนื่อง ฉันจะโพสต์วิธีแก้ปัญหาที่ฉันใช้อยู่ในปัจจุบัน

ข้อความค้นหาสื่อ CSS:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

ลองดู: CSS-Tricks + ขนาดอุปกรณ์ และ คำค้นหาสื่อ

ฉันมีปัญหาที่คล้ายกันซึ่งแก้ไขโดยการเพิ่ม div พิเศษในเมนูนำทางของฉัน จากนั้นฉันก็เพิ่มสิ่งต่อไปนี้

#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

ซึ่งทำให้ไม่สามารถห่อได้ หวังว่ามันจะได้ผล

หากต้องการแก้ไขปัญหาการซูมเข้า ให้ลองเพิ่มแอตทริบิวต์ min-width ให้กับตัวนับภายนอก (#container หรือ #navbar?) การตั้งค่า min-width ป้องกันไม่ให้หน้าเว็บพยายามย่อขนาดลงเกินความกว้างที่ระบุ (เช่น 300px) หากคุณซูมเข้ามากเกินไป แทนที่จะให้องค์ประกอบภายใน <div> กระโดดลงมาที่บรรทัดถัดไป แถบนำทางของคุณจะหยุดย่อขนาดและแถบเลื่อนจะปรากฏที่ด้านล่างของหน้า

ตัวอย่าง (ในสไตล์ชีทของคุณ):

#navbar {min-width:300px;}

อีกวิธีที่ดีในการบรรลุเป้าหมายนี้คือการใช้แอตทริบิวต์ min-width กับเนื้อหาของหน้า

ตัวอย่าง (ในสไตล์ชีทของคุณ):

body {min-width:300px;}

สุดท้ายนี้ หากคุณต้องการให้แถบนำทางของคุณขยายเต็มความกว้างของหน้า ให้ใช้ {clear:both;} ในสไตล์ชีต

อืม....คุณได้ลองเพิ่มคุณสมบัติ min-width/min-height แล้วหรือยัง? คุณสามารถรวมคุณสมบัติเหล่านั้นไว้ใน #container div ของคุณได้ นั่นอาจเป็นเพียงการหลอกลวง

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

ดู: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

ฉันจะตั้งค่าความสูงและความกว้างสัมบูรณ์ให้กับองค์ประกอบ/div ทั้งหมดบนหน้า

รหัส {ความสูง: 250px; ความกว้าง: 500px}

หรือคุณสามารถใช้ต่ำสุด/ความกว้างสูงสุด/สูงเพื่อปรับเค้าโครงหน้าตามขนาดหน้าจอต่างๆ หรือเมื่อปรับขนาดหน้าต่างเบราว์เซอร์

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

เอาล่ะ นี่เป็นเหมือนคำแนะนำข้างต้นมาก แต่มันมีพื้นที่เนื้อหาที่มีความกว้างคงที่ หากคุณกำลังมองหาความกว้างเต็ม ฉันขอโทษ (;_;)

<style>
body {
    margin:0px;
}
#container {
    width:990px;
    background-color: #00bbee;
    margin:0 auto;
    border: 2px solid red;
}
#navbar ul {
    list-style: none;
}
#navbar li {
    display: inline;
}
#navbar li a {
    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;
}
#navbar li a:hover {
    background-color: white;
    color: green;
}
#navbar {
    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;
}
</style>

<div id="container">
  <div id="navbar">
    <ul>
      <li><a href="/thindex.html">Home</a></li>
      <li><a href="/thtop.html">Top</a></li>
      <li><strong><a href="/thfree.html">FREE</a></strong></li>
      <li><a href="/thphoto.html">Photo</a></li>
      <li><a href="/thabout.html">About</a></li>
      <li><a href="/thcontact.html">Contact Us</a></li>
    </ul>
  </div>
  <div id="content">
    <p>Some sample text.
    <p> 
  </div>
</div>

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