在移動設備上，不同的屏幕尺寸和設備方向都會導致頁面顯示效果的變化。在這種情況下，使用CSS自適應高度的方法可以幫助我們實現頁面在不同設備上的自適應效果。

首先，我們可以使用以下CSS代碼來設置頁面的基本樣式：

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 16px;
}
body {
display: flex;
flex-direction: column;
}

上面的代碼中，我們設置了html和body元素的高度和寬度均為100%，這樣可以確保頁面在任何情況下都能夠占據整個屏幕。同時，我們將body元素的display屬性設置為flex，讓它能夠自適應高度。

接下來，我們可以使用以下代碼將需要自適應高度的元素放在一個容器內，并設置其flex-grow屬性：

.container {
flex: 1;
}
.content {
height: 100%;
}

上述代碼中，我們把需要自適應高度的元素放在了一個容器內。使用flex: 1可以讓容器自適應高度，從而讓其內部的內容能夠自適應高度。而在content元素中，我們設置了height為100%，這樣可以確保容器內的內容占據整個容器高度。

最后，我們可以使用以下代碼來確保內容不會超出容器高度：

@media screen and (max-height: 400px) {
.content {
overflow-y: auto;
}
}

上述代碼中，我們使用了@media查詢來判斷設備高度是否小于400px，并使用overflow-y: auto來在容器高度不足時啟用滾動條來展示內容。

總之，在移動端開發中，使用CSS自適應高度的方法能夠幫助我們實現頁面的自適應展示，為用戶提供更好的體驗。