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

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

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

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

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

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

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

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

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

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