移动端真机ios适配问题以及移动端会出现的一些小问题

最新推荐文章于 2023-10-18 09:25:24 发布

777zhangsan

最新推荐文章于 2023-10-18 09:25:24 发布

阅读量840

点赞数 1

分类专栏：移动端 css h5 文章标签：移动端 ios 通用 weui

本文链接：https://blog.csdn.net/qq_41269564/article/details/89450479

版权

这篇博客探讨了移动端，尤其是iOS设备上遇到的适配问题，包括字体加粗无效、透明度处理、点击事件及WebView交互问题。此外，还提到了如何隐藏滚动条、实现背景渐变、文本居中、单行文本省略、下划线样式以及微信小程序的单位转换。文章提供了针对这些问题的解决方案，如使用rgba()替代透明度、设置cursor:pointer、添加webkit前缀等，并给出了移动端通用头部的CSS代码示例。

摘要由CSDN通过智能技术生成

字体加粗 font-weight：bold； //要用blod/bloder/nomar等数字在移动端上无效
透明度 transport 在ios中不生效，直接用 rgba(52, 52, 52, 0)–透明代替
/系统默认菜单被禁用/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
在安卓和ios上点击按钮事件添加之后双击的时候不会选中按钮上面的字，加上 cursor:pointer；即可
一些安卓APP的WebView中不工作，是因为安卓app的webview默认屏蔽了input控件的使用
隐藏滚动条 class名 ::-webkit-scrollbar {
display: none;
}
背景渐变色 background: linear-gradient(#fdd9a5, #fba55b);
flez相关属性 display:flex; justify-content:space-around/space-between;
水平垂直居中 justify-content: center; align-items: center;
单行文本省略 width: 固定宽度;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
下划线 text-decoration: underline;
微信小程序 1rpx=0.5px