[分享]css兼容苹果和安卓

为了保证网站的样式在各种不同的设备和浏览器上都能正确显示，我们需要特别关注CSS的兼容性。其中最关键的就是苹果和安卓这两大主流移动设备。针对苹果设备，我们需要做以下的CSS兼容性处理：/ 针对iOS设...

为了保证网站的样式在各种不同的设备和浏览器上都能正确显示，我们需要特别关注CSS的兼容性。其中最关键的就是苹果和安卓这两大主流移动设备。

针对苹果设备，我们需要做以下的CSS兼容性处理：

/* 针对iOS设备 */
@media only screen and (max-width: 480px) {
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    /* 消除iOS下input默认样式 */
    input[type="button"], input[type="reset"], input[type="submit"] {
        -webkit-appearance: none;
    }
} 

而针对安卓设备的CSS兼容性处理，则需要参考以下代码：

/* 针对Android设备 */
@media only screen and (min-width: 240px) and (max-width: 320px) {
    body {
        font-size: 14px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 360px) {
    body {
        font-size: 16px;
    }
} 

需要注意的是，在进行CSS兼容性处理时，我们应当充分考虑到不同移动设备的分辨率、可视区域大小以及屏幕比例等因素，以便为不同用户提供更加舒适和合适的网站体验。