CSS媒体查询

兼容iphone4/4s

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
}

兼容iphone5

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
}

兼容iphone6,iphone7,iphone8s

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){
}

兼容iphone6 Plus,iphone7 Plus,iphone8 Plus @media

(device-height:736px) and (-webkit-min-device-pixel-ratio:2){
}

兼容iphoneX

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){

-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

1. 取消chrome下input和textarea的聚焦边框:
  1. input,button,select,textarea{outline:none}
  2. 取消chrome下textarea可拖动放大:
  3. textarea{resize:none}
  4. 最后,写在一起,重置input和textarea的默认样式:
  5. input,button,select,textarea{outline:none}
  6. textarea{resize:none}
  7. input,textarea{
  8. -webkit-appearance: none;
  9. }
  10. Safari 中 input textarea 去除阴影

纯数字键盘 <input type="text" pattern="[0-9]*">

上一篇:关于css3媒体查询


下一篇:JS 获取浏览器显示比例,缩放比例