網站在手機上顯示不同嗎？

我的簡歷網站在桌面上看起來不錯。但是，我發現在不同的移動Web瀏覽器上查看HTML段落標籤時，它們不能正確縮放（請參見下面的附圖）。網站在手機上顯示不同嗎？

Screenshot 1: Website viewed using Facebook Messenger's built-in web browser.

Screenshot 2: Website viewed using Android 7.0's Google Chrome App.

我用我的HTML段落標記這個CSS代碼;

p { 
    font-family: 'Lato', sans-serif; 
    color: #b3b3b3; 
    font-weight: 400; 
    line-height: 1.8em; 
}

我的最終目標是讓我的網站看起來像截圖1爲所有的移動網絡瀏覽器。任何人都可以幫助我確定問題以及如何解決它？

編輯：我已經遺漏了一個重要的細節，我的網站的內容都位於一張表內。它的格式是這樣的;

<table width="900" border="0" cellpadding="4" align="center"> 
<tbody> 
<tr> 
<td class="background"> 

<!-- all websites HTML here --> 

</td> 
</tr> 
</tbody> 
</table>

我還發現，我也可以用下面的CSS和HTML我中心網站（這可能是不是把我的所有內容在一個表更好）;

#page-wrap { 
    width: 800px; 
    margin: 0 auto; 
} 

<body> 
    <div id="page-wrap"> 
    <!-- all websites HTML here --> 
    </div> 
</body>

來源

2017-08-04 Nicollo Abe

你可以嘗試'<元名稱= 「視口」內容=「寬度=設備寬度，初始規模= 1.0，最小刻度= 1.0，最大 - scale = 1.0，user-scalable = no，shrink-to-fit = no「>'？ –

你在哪裏爲你的段落設置字體大小？ – Korgrue

我沒有爲我的段落設置字體大小。我應該使用font-size：1em;？ –

嘗試這些：

@media only screen and (max-width: 320px) { 
    /* Styles */ 
} 


/* Tablet (portrait and landscape) ----------- */ 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    /* Styles */ 
} 


/* Tablet (landscape) ----------- */ 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 
    /* Styles */ 
} 


/* Tablet (portrait) ----------- */ 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 
    /* Styles */ 
} 

@media screen and (min-width: 37em) {}

來源

2017-08-04 22:23:35

感謝您的建議，但結果仍然相同。 :( –

我認爲它的文字... –

網站在手機上顯示不同嗎？

回答

相關問題