兼容性整理

红米手机 - 圆角外背景色溢出(H5)

使用CSS3中的background-clip规定背景的绘制区域,将背景裁剪到内边距框

.circle{
    background-clip:padding-box;
}

input placeholder居右,android不兼容(H5)

把文本方向设置为“从右向左”,可以解决该问题

input::-webkit-input-placeholder {
    direction: rtl;
}

全屏背景图片兼容尺寸(H5)

目前使用iPhone 6 Plus 屏幕尺寸(414736 / 7501334)为兼容尺寸

body {
    background: url('http://media.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg') no-repeat 0 0 transparent;
    background-size: 100%;
}

图片或背景高清化

1. 方案一

   /* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
   .css{
    background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_1x.jpg);
   }
   /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
   @media only screen and (-webkit-min-device-pixel-ratio:2){
    .css{
      background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_2x.jpg);
    }
   }
   /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
   @media only screen and (-webkit-min-device-pixel-ratio:3){
    .css{
      background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_3x.jpg);
    }
   }
   

2. 方案二 image-set 实现高清化,目前移动端ios7+，android 4.4+ 下已经支持了

   .css {
    background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_2x.jpg);    /*不支持image-set的情况下显示*/
    background: -webkit-image-set(
      url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_1x.jpg) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
      url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_2x.jpg) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
      url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_3x.jpg) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
    );
   }