移动开发遇到的兼容性问题

论坛 期权论坛 脚本     
匿名技术用户   2021-1-6 07:39   22   0
  1. IOS手机测试时会发现加了margin-bottom的属性无效。解决:替换为padding-bottom或者放个空盒子有高度宽度占位即可。
  2. IOS手机的输入框出现未知的内阴影。解决:input: {-webkit-appearance: none;}
  3. 控制手机上方的标题:document.title;
  4. 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);

}}

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP