Question

我的简历网站在桌面上显示效果很好。但是，我发现在不同的移动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.

我将这个CSS代码用于我的HTML段落标记;

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>

Answer 1

试试这些：

@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) {}

网站在移动设备上显示不同？

1 个答案: