在現(xiàn)代的網(wǎng)站開發(fā)中，越來越多的用戶使用手機(jī)瀏覽網(wǎng)站。而為了讓網(wǎng)站在不同的手機(jī)系統(tǒng)中都有良好的體驗(yàn)，我們需要針對(duì)不同的系統(tǒng)添加不同的CSS樣式。

現(xiàn)在有一種很常見的做法是在CSS文件中通過媒體查詢來實(shí)現(xiàn)，例如：

/*iPhone X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
/* Add CSS code for iPhone X */
}
/*Android*/
@media only screen and (max-width: 640px) and (min-width: 360px) {
/* Add CSS code for Android */
}
/*iPad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* Add CSS code for iPad */
}

以上代碼中，我們通過媒體查詢來識(shí)別不同設(shè)備的屏幕尺寸、像素密度、方向等參數(shù)來靜態(tài)匹配。但這樣的方式并不總是一定準(zhǔn)確，因?yàn)樵诓煌南到y(tǒng)和瀏覽器中分辨率的表現(xiàn)也不同。

另一種更可靠的方法是通過JavaScript來識(shí)別手機(jī)系統(tǒng)，再根據(jù)系統(tǒng)動(dòng)態(tài)添加CSS樣式。以下是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].classList.add('mobile');
if (/iPad/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].classList.add('ipad');
} else if (/iPhone/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].classList.add('iphone');
} else if (/Android/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].classList.add('android');
}
}

以上代碼中，我們使用了正則表達(dá)式判斷了用戶的設(shè)備類型，接著使用classList API向HTML根元素添加了手機(jī)和系統(tǒng)類型的CSS類。

不同的手機(jī)系統(tǒng)和版本都有其特點(diǎn)，因此我們可能需要專門的CSS處理iOS、Android、Windows Phone等系統(tǒng)，這需要開發(fā)者在開發(fā)時(shí)多加了解和測(cè)試。