今天我們來學習如何設置HTML5在手機上顯示分屏。通過使用媒體查詢和CSS樣式表，我們可以使頁面在移動設備上顯示為兩個或更多的屏幕。 首先，我們需要在HTML文檔的頭部添加以下代碼：

這段代碼告訴瀏覽器，文檔應該以設備的寬度為基礎進行縮放。這樣，我們就可以確保文檔在不同設備上顯示得很好。 接下來，我們需要在CSS樣式表中添加以下代碼：

@media screen and (max-width: 480px) {
body {
width: 100%;
margin: 0;
padding: 0;
}
.screen {
width: 50%;
display: inline-block;
vertical-align: top;
border: 1px solid #ccc;
box-sizing: border-box;
}
}

這段代碼使用@media媒體查詢，它被設計用來在不同的設備上應用不同的樣式，以確保網頁在不同設備上顯示的很棒。 我們首先設置了一個條件，即當屏幕的最大寬度小于或等于480像素時，應用這些樣式。 我們然后設置了body元素的寬度為100%，并移除了所有的margin和padding。這是因為我們不想讓頁面在移動設備上出現滾動條。 然后，我們使用.screen選擇器創建屏幕容器，并讓它和其他容器一樣，寬度為50%。它還設置了一個內聯組件，并使用垂直對齊選項來放置它的屏幕的頂部。 最后，我們應用了一些裝飾效果，如邊框和盒子大小，以確保頁面在視覺上很好看。 總結：在這篇文章中，我們了解了如何使用HTML5和CSS3的一些新功能，在移動設備上創建分屏的網頁。我們使用了媒體查詢，CSS布局，和其他的技術，來確保網頁在不同設備上顯示得很好。現在您可以嘗試使用這些技術來創建自己的分屏網頁！