移动端浏览器兼容笔记

  • PC浏览器的button有默认背景颜色
    在iphone6, iphone5手机上测试的时候发现, 一个button的看不见, 但是PC浏览器上可以看见, 然后发现是因为chrome浏览器上对button有默认的样式, 所以就算没有background-color, button也是有颜色的


    移动端浏览器兼容笔记_第1张图片
    Paste_Image.png

    默认的样式就是这样子


    移动端浏览器兼容笔记_第2张图片
    Paste_Image.png
  • input的内阴影
    在iphone5手机上发现input框都有只要不是border:none; 都有一个内阴影, 然后发现是-webkit-appearance这个属性, 只有设置为none就可以去掉内阴影, 这个方法也常用来去掉IOS的默认样式
  • 如何调试iPhone上的样式问题
    这个方法严格来说不是直接调试, 而是借助Safari来调试, 因为一般我们是使用Chrome来开发, 很多IOS上会出现的问题在Chrome上没有, 但是在手机上Debug又不容易, 但是其实可以使用Safari打开, 一般iPhone上同样的问题在Safari开发者模式中可以模拟出来, 然后就可以使用开发者工具来调试了

你可能感兴趣的:(移动端浏览器兼容笔记)