H5移动端开发问题汇总及解决方案

ios: DOM元素一边固定，另一边滚动，滚动卡顿

// 最简单粗暴的方式，就是添加以下样式属性
-webkit-overflow-scrolling: touch;

部分手机第三方输入法会将页面往上挤

const interval = setInterval(() => {document.body.scrollTop = 0;}, 100)
//关闭页面或销毁组件时别忘记清空定时器

css透明度颜色设置问题

// 部分机型不支持hex写法，推荐使用rgba写法
#0000009c --> rgba(0, 0, 0, .61)

flex对低版本的ios和Android的支持问题

// 使用postcss的autoprefixer插件，自动添加浏览器前缀，并且增加更低版本的配置,自动添加flex老版本的属性和写法
autoprefixer({
    browers: [
        'iOS >= 6', // 特殊处理低版本iOS
        'Safari >= 6' // 特殊处理低版本Safari
    ]
})

ios 日期转换NAN的问题

// 讲日期字符串的格式符号替换成'/'
// 栗子🌰:
'yyyy-MM-dd'.replace(/-/g, '/')

H5 标签设置onClick事件，点击标签会高亮，若要取消高亮效果，则可以设置标签样式

-webkit-tab-highlight-color: rgba(0, 0, 0, 0)

iOS 点击存在300ms的延迟，要取消这个延迟，可以引入fastclick插件

fastclick.attach(document.body)

iOS input span 标签（特别是相邻的都是行内元素）定义的onclick监听事件，在iOS机器上兼容性存在差异，需要点击两次才能触发效果，解决这个问题，可以将input span元素改为块元素如div p td之类的标签

<span onclick=""></span>
// 改为
<div onclick=""></div>

iOS低版本对象简写，会报错

// 不可以写成：
const params = {
    aa,
    bb
}
// 建议写成:
const params = {
    aa: aa,
    bb: bb
}

FEATURED TAGS

前端开发 H5 JavaScript 设计模式 browser jQuery 源码分析生活 leetcode Array Stack Queue Linked List 剑指offer Binary Search Tree Binary Tree Breadth-First Search Depth-First Search String Set Binary Search Sliding Window Backtracking Dynamic Programming Two Pointers Union Find Sort Bit Operation Recursion Map Graph Search Hash LinkedList 复盘 QuickSort Trie Design MinHeap Traverse Min Heap Node.js BackEnd SQL MySQL Design Patterns Network 计算机网络 Python SVG

CATALOG

FEATURED TAGS

FRIENDS