移动端开发遇到的一些兼容性问题及其整理「建议收藏」

移动端开发遇到的一些兼容性问题及其整理「建议收藏」IOS手机测试时会发现加了margin-bottom的属性无效。解决:替换为padding-bottom或者放个空盒子有高度宽度占位即可。IOS手机的输入框出现未知的内阴影。解决:input:{-webkit-appearance:none;}控制手机上方的标题:document.title;…

大家好,又见面了,我是你们的朋友全栈君。

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

  1. IOS手机测试时会发现加了margin-bottom的属性无效。解决:替换为padding-bottom或者放个空盒子有高度宽度占位即可。
  2. IOS手机的输入框出现未知的内阴影。解决:input: {-webkit-appearance: none;}
  3. 控制手机上方的标题:document.title;
  4. canvas画出来的内容模糊问题。解决:canvas问题解决
  5. new Date的ios兼容问题:当使用new Date(‘2020-1-20’)这种方法的时候安卓和PC端都是没问题的,IOS手机不支持,IOS支持new Date(‘2020/1/20’)
  6. font-weight: 兼容问题【在不同手机和浏览器上的效果不一致】
  7. 移动端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);
  }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152723.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • YUI3 使用总结

    YUI3 使用总结1. YUI3总体认识1.1 面向对象的JS编程,RIA工具:面向对象的JS编程,主要体现的以下几个方面:1. 继承JS有三种继承方式:javascript中继承一般分为三种方式:”类式继承”,”原型继承”,”掺元类”2. 封装:JS的Function自身就实现了对变量的封装,局部变量等。Object对性的属性也可以实现一定的封装效果3. 接口和抽象类YUI3…

  • 【转载】一张“神图”看懂单机/集群/热备/磁盘阵列(RAID)

    【转载】一张“神图”看懂单机/集群/热备/磁盘阵列(RAID)

    2021年11月20日
  • 微信小程序获取unionid_小程序的openid有什么用

    微信小程序获取unionid_小程序的openid有什么用UniqueID以及openid的获取涉及到用户的敏感信息,返回的数据encryptedData是加密后的数据要提取信息需要对数据进行解密官网提供了解密的算法,将nodejs的版本拿过来稍作修改即可下载cryptojs放到项目的utils目录下 在utils目录下新建decode.js写入以下内容//utils/decode.jsvarCrypto=require…

    2022年10月26日
  • exe4j的使用_使用方法

    exe4j的使用_使用方法exe4j的使用在这里选择exe填写你的exe名字和存放路径对软件的设置如果电脑是64位需要勾上防止软件乱码-Dfile.encoding=UTF-8导入jar包jdk版本允许最小和

  • mybatis update没有打印影响行数[通俗易懂]

    今天在排除问题的时候,发现有一个mybatisupdate语句没有打印出影响行数,原因是mapper.xml文件中update语句的标签是<select>…..</sele

  • java之jce「建议收藏」

    java之jce「建议收藏」一、简介JavaCryptographyExtension(JCE)是一组包,它们提供用于加密、密钥生成和协商以及MessageAuthenticationCode(MAC)算法的框架和实现。它提供对对称、不对称、块和流密码的加密支持,它还支持安全流和密封的对象。它不对外出口,用它开发完成封装后将无法调用。在早期JDK版本中,由于受美国的密码出口条例约束,Java中涉及加解密功能…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号