移动端开发遇到的一些兼容性问题及其整理

浅浅的花香味﹌ 2023-05-22 14:28 12阅读 0赞

### 此博客仅为个人开发整理笔记。 ###

1.  IOS手机测试时会发现加了margin-bottom的属性无效。解决：替换为padding-bottom或者放个空盒子有高度宽度占位即可。
2.  IOS手机的输入框出现未知的内阴影。解决：input: \{-webkit-appearance: none;\}
3.  控制手机上方的标题：document.title；
4.  canvas画出来的内容模糊问题。解决：[canvas问题解决][canvas]
5.  移动端1px问题【有些机型显示的边框实际比1px粗一些】：  
    dpr(devicePixelRatio)  
    dpr = 设备物理像素/设备独立像素  
    什么是设备物理像素，什么是设备独立像素，这些都不重要(详细讲解参考https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)，重要的是你需要知道：  
    dpr = 设备实际显示的像素比/css像素比  
    比如css像素为1，设备的dpr为2，那么屏幕上实际显示的像素就是css像素\*dpr，也就是2px。  
    其中dpr可以通过css或者js查询出来，知道了css像素与实际显示像素的缩放比，那么就可以利用transform: scale()对1px进行缩放。  
    2.利用dpr适配1px  
    知道了什么是dpr，那么如何让利用dpr来适配1px呢。  
    css实现(以下边框为例)：  
    css中可以利用media查询dpr

解决代码：

.scale-1px { 
      position: relative;
      border: none; &:after { 
        position: absolute;
        left: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 1px;
      }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) { 
      .scale-1px:after { 
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
      }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) { 
      .scale-1px:after { 
          -webkit-transform: scaleY(0.33);
          transform: scaleY(0.33);
      }
    }

[canvas]: https://blog.csdn.net/weixin_43606158/article/details/104749702?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158716829419725222416661%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158716829419725222416661&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-1