隨著移動設備的普及，許多網站已經開始逐漸轉向響應式設計，以適應各種尺寸的屏幕。然而，在不同的移動操作系統上，瀏覽器呈現頁面的方式有所不同，這就需要我們編寫可以兼容各種系統的HTML代碼。

/*蘋果設備兼容代碼*/
@media screen and (max-device-width: 480px) {
/*iPhone、iPod Touch*/
#navigation {
position: static;
}
#header h1 {
font-size: 24px;
}
}
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) {
/*iPad*/
#navigation {
position: fixed;
}
#header h1 {
font-size: 36px;
}
}
/*安卓設備兼容代碼*/
@media screen and (max-width: 480px) {
/*小屏幕的安卓設備*/
#navigation {
position: static;
}
#header h1 {
font-size: 24px;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
/*中等尺寸屏幕的安卓設備*/
#navigation {
position: fixed;
}
#header h1 {
font-size: 36px;
}
}

上面的代碼片段展示了如何使用CSS媒體查詢，在不同設備下自適應調整頁面顯示效果。通過這種方法，我們可以在不同設備下提供最佳的用戶體驗，增強網站的易用性和可訪問性。