在现代的网站开发中，越来越多的用户使用手机浏览网站。而为了让网站在不同的手机系统中都有良好的体验，我们需要针对不同的系统添加不同的CSS样式。

现在有一种很常见的做法是在CSS文件中通过媒体查询来实现，例如：

/*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 */
}

以上代码中，我们通过媒体查询来识别不同设备的屏幕尺寸、像素密度、方向等参数来静态匹配。但这样的方式并不总是一定准确，因为在不同的系统和浏览器中分辨率的表现也不同。

另一种更可靠的方法是通过JavaScript来识别手机系统，再根据系统动态添加CSS样式。以下是一个简单的实现：

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');
}
}

以上代码中，我们使用了正则表达式判断了用户的设备类型，接着使用classList API向HTML根元素添加了手机和系统类型的CSS类。

不同的手机系统和版本都有其特点，因此我们可能需要专门的CSS处理iOS、Android、Windows Phone等系统，这需要开发者在开发时多加了解和测试。