CSS 可以很方便地通過媒體查詢和 viewport 屬性來控制網(wǎng)頁在手機(jī)屏幕上的顯示效果。

第一步是設(shè)置 viewport，它決定了瀏覽器如何渲染網(wǎng)頁。在 head 中插入以下代碼即可：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中，width=device-width 表示將 viewport 的寬度設(shè)置為設(shè)備的寬度；initial-scale=1.0 表示初始縮放大小為 1。

然后，我們就可以通過媒體查詢設(shè)置不同屏幕尺寸下的樣式了。

/* 手機(jī)屏幕的橫向分辨率在 480px 以下 */
@media screen and (max-width: 480px) {
/* 這里設(shè)置手機(jī)屏幕下的樣式 */
}
/* 手機(jī)屏幕的橫向分辨率在 481px 到 768px 之間 */
@media screen and (min-width: 481px) and (max-width: 768px) {
/* 這里設(shè)置平板屏幕下的樣式 */
}
/* 手機(jī)屏幕的橫向分辨率大于 768px */
@media screen and (min-width: 769px) {
/* 這里設(shè)置電腦屏幕下的樣式 */
}

在以上代碼中，我們使用了 @media 規(guī)則來指定不同的屏幕尺寸下的樣式。我們可以根據(jù)設(shè)備的屏幕寬度范圍來定義樣式。例如，“max-width: 480px” 表示僅當(dāng)屏幕寬度小于等于 480px 時應(yīng)用樣式，而 “min-width: 481px and max-width: 768px” 表示在屏幕寬度在 481px 到 768px 之間時應(yīng)用樣式。

最后，我們需要注意 Mobile Safari 的一些特殊處理。它會自動在某些元素（例如鏈接和按鈕）周圍添加一定的點(diǎn)擊區(qū)域，以確保它們易于觸摸操作。如果需要覆蓋這種行為，可以在相關(guān)元素上添加如下樣式：

/* 取消 Mobile Safari 的鏈接高亮效果 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* 取消 Mobile Safari 的按鈕陰影 */
-webkit-appearance: none;

通過上述設(shè)置，我們可以很方便地控制網(wǎng)頁在不同類型的移動設(shè)備上面的展示效果。