网站在手机上显示不同吗？

我的简历网站在桌面上看起来不错。但是，我发现在不同的移动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

感谢您的建议，但结果仍然相同。 :( –

我认为它的文字... –

网站在手机上显示不同吗？

回答

相关问题