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

移动端开发遇到的一些兼容性问题及其整理「建议收藏」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)


相关推荐

  • Oracle PL/SQL编程详解之一: PL/SQL 程序设计简介(千里之行,始于足下)「建议收藏」

    Oracle PL/SQL编程详解之一: PL/SQL 程序设计简介(千里之行,始于足下)「建议收藏」作者:EricHu(DB、C/S、B/S、WebService、WCF、PM等)出处:http://www.cnblogs.com/huyong/Q Q:80368704   E-Mail: 80368704@qq.com本博文欢迎大家浏览和转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,在『参考』的文章中,我会表明参考的文章来源,尊重他人版权。若您发现我侵

  • java递归查询父节点_java递归例子

    java递归查询父节点_java递归例子一、需求项目里要让用户能够设置所选择教材的章课节,以针对章课节提供相应的题目供用户做题。设计:用户设置了教材后,首次登录,进行章节设置时。默认为用户选择第一章、第一课、第一节。思路:用户访问页面,章一栏显示所有章,课一栏显示第一章下所有课程,节一栏显示第一章、第一课下的所有节。然后获取用户当前选择的章课节信息。如果当前用户没有设置过该教材的章课节,就为其设置默认的第一章、第一课、第一节。数据库设计…

  • docker网络配置方法总结

    docker网络配置方法总结

  • 赛门铁克symantec的安装与卸载-附下载地址(本人亲测)

    赛门铁克symantec的安装与卸载-附下载地址(本人亲测)赛门铁克symantec的安装与卸载下载地址1:英文版下载地址https://www.jb51.net/softs/398259.html2:中文版下载地址(包含卸载工具)链接:https://pan.baidu.com/s/1Naes0tUtnJRwAhI5GZ_eYw提取码:7r2h一:安装二:赛门铁克的卸载1:window卸载和更改程序是无法进行卸载的,程序还在运行中,并且无法关闭程序,导致…

  • 截取示波器网络图片[通俗易懂]

    截取示波器网络图片[通俗易懂]■问题由来手边有一台相对比较古老的Tektronix的示波器TDS3054D示波器,四通道的。它可以通过联网获得波形的图片。对于记录观察到的波形相对比较方便。▲示波器及其联网获得屏幕图片在截取示波器波形窗口的过程中,由于上面出现红色的字体(HOME:TDS3054BAA(192.168.0.101))的影响,经常使得截取图片出现不完整,因此希望通过软件(PYTHON程序)自动完成精细截取的过程。▲截取示波器波形窗口TDS3054B的显示模式包括两种:普通显示模式:示波器的

    2022年10月12日
  • 软件测试用例的设计方法_设计测试用例的依据

    软件测试用例的设计方法_设计测试用例的依据测试用例设计方法,等价类划分法,边界值分析法,错误推测法,因果图法,判定表驱动法,三角形问题用例设计

    2022年10月10日

发表回复

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

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