桌面寬度在手機上奇怪地縮小了

我在設計移動版本/尺寸的桌面逐漸變小的網站時出現奇怪的錯誤。我已經檢查過，這不是標籤未被封閉或格式不正確的問題;代碼在html5中驗證。我在臺式機或平板電腦版本中沒有發現此錯誤，但在應用移動版本的媒體查詢時，會縮小。桌面寬度在手機上奇怪地縮小了

對不起，這可能是一個非常複雜的問題！

下面的代碼：

<table id="general"><tr> 
      <td class="cell-small"><h2>General Dermatology</h2><p>CanopyMD is a trusted, respected medical provider of treatments for diseases of the skin, hair, and nails.</p></td> 
      <td class="cell-big"><img src="general.jpg" class="right-img" alt="General Dermatology CanopyMD" /></td> 
     </tr></table> 
     <table id="cosmetic"><tr> 
      <td class="cell-big"><img src="cosmetic.jpg" class="left-img" alt="Cosmetic Dermatology CanopyMD"/></td> 
      <td class="cell-small"><h2>Cosmetic Dermatology</h2><p>Patients of our cosmetic services understand our sense of professionalism and responsibility.</p><p><a href="/cosmetic">View Our Services</a></p></td> 
     </tr></table> 
     <table id="about"><tr> 
      <td class="cell-small"><h2>About Us</h2><p>We have been serving the community for over a decade.</p><p><a href="/about/our-staff.html">Our Staff</a></p><p><a href="/about/our-office.html">Our Offices</a></p></td> 
      <td class="cell-big"><img src="about.jpg" class="right-img" alt="Our Office CanopyMD" /></td> 
     </tr></table> 
     <table id="contact"><tr> 
      <td class="cell-big"><img src="contact.jpg" class="left-img" alt="Live Chat CanopyMD" /></td> 
      <td class="cell-small"><h2>Contact Us/Live Chat</h2><p><a href="/contact.php">Make an Appointment</a></p><p><a href="/ask-a-nurse.php">Ask A Nurse</a></p></td> 
     </tr></table> 
     <table id="resources"><tr> 
      <td class="cell-small"><h2>Patient Resources</h2> 
      <form name="PrePage" method="post" action="https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx"><input type="hidden" name="LinkId" value="3bd29747-6b29-43c1-897c-77ec8b3a1d76" /><p><a href="#" onclick="PrePage.submit();">Make a Payment</a></p></form> 
      <p><a href="/resources/patient-forms.php">Patient Forms</a></p><p><a href="https://hartsoughdermatology.nextechweb.com/patient" target="_blank">Patient Portal</a></p></td> 
      <td class="cell-big"><img src="resources.jpg" class="right-img" alt="Patient Resources CanopyMD" /></td> 
     </tr></table>

，這裏是適用的CSS：

.cell-big { 
    width: 58%; 
    border: none; 
    padding: 0; 
    line-height: 0; 
} 
.cell-big:nth-child(even) { 
    text-align: right; 
} 
.cell-big img { 
    max-width: 100%; 
    width: 100%; 
} 

@media all and (max-width: 689px) { 
    h2 { margin-bottom: 4%; } 
    h2::after { display: none; } 
    .cell-small a { 
     margin-left: 12.5%; 
     width: 75%; 
    } 
    body { background-image: none; } 
    table { width: 100%; } 
    .cell-big { display: none; } 
    .cell-small { 
     width: 100%; 
     padding: 4% 0 13% 0; 
    } 
    #header { margin-bottom: 0; } 
    #tree { display: none; } 
    #black { display: none; } 
    .thirds { display: none; } 
    #logo { 
     max-width: 70%; 
     width: 70%; 
     margin-left: 15%; 
     margin-top: 7%; 
    } 
    #iconholder { 
     width: 68%; 
     padding-top: 4%; 
    } 
    .cell-small::before { 
     content: ""; 
     display: block; 
     width: 100%; 
     background-size: cover; 
     background-position: center; 
     height: 175px; 
    } 
    #general .cell-small::before { background-image: url("general.jpg"); } 
    #cosmetic .cell-small::before { background-image: url("cosmetic.jpg"); } 
    #about .cell-small::before { background-image: url("about.jpg"); } 
    #contact .cell-small::before { background-image: url("contact.jpg"); } 
    #resources .cell-small::before { background-image: url("resources.jpg"); 
} 
}

下面是完整的頁面截圖;這是它如何顯示在Chrome，火狐和IE：