Open xinglie opened 4 years ago
以下仅记录网上不常见的方案，不定时补充
在移动端的web页面，除性能问题外，通常还伴随着很多浏览器提供的默认行为，让用户使用起来感觉不如原生来得“清爽”，比如对形如电话号码的数字，会识别成电话号码，方便用户触摸时唤起打电话的动作。这样虽然会带来方便，但也会让用户变得“小心翼翼”，避免一些误操作引起不必要的形为触发 对这些浏览器的默认形为，按全局禁用，需要启用的方案来进行处理
对于移动端常用的比如禁用电话号码识别等可自行搜索，这里不再记录
移动端建议图标使用svg，iconfont在移动端载入较慢，会出现闪现的效果，对于重要的比如loading图标，建议使用svg，避免iconfont不能第一时间出现的问题
如果页面要固定头部或尾部，我们可以使用fixed定位来实现(常用) 也可以头尾用fixed或绝对定位，中间放一个可滚动的容器 也可以使用flex进行定位，头尾一般定高，中间可滚动并设置自动填充剩余高度 如果页面没有其它特殊要求，一般使用第一个方案，其它2个方案供参考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action https://caniuse.com/#search=touch-action web页面常见的误操作是双指或双击放大，我们可以使用touch-action来禁用。 通常web页面设计为宽度自适应，高度随内容。即可以上下滚动，一般不左右滚动，左右滚动常用于一些导航或tab导航上 这时候我们就可以在body上设置touch-action:pan-y，让整个页面仅支持上下滚动，其它如双指放大等则不再有效。 在需要水平滚动的节点上添加touch-action:pan-x支持水平滚动，这样整个页面就不会因误操作放大缩小了。 touch-action:none可禁止滚动，比如在有fixed定位的页面上，如果有输入框，当输入框聚焦唤起软键盘时，这些fixed定位的元素会失效，随页面滚动。如果我们在唤起软键盘时，给body添加touch-action:none，可阻止滚动，这样这些fixed定位的元素就不会跑来跑去了。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select https://caniuse.com/#search=user-select 长按一般会呼出复制粘贴功能，建议对整个页面设置user-select:none禁用，对input等可供输入的启用，这样就能避免误操作出现复制粘贴等功能。 对需要复制的内容，可以提供复制按钮
在移动端的web页面，除性能问题外，通常还伴随着很多浏览器提供的默认行为，让用户使用起来感觉不如原生来得“清爽”，比如对形如电话号码的数字，会识别成电话号码，方便用户触摸时唤起打电话的动作。这样虽然会带来方便，但也会让用户变得“小心翼翼”，避免一些误操作引起不必要的形为触发 对这些浏览器的默认形为，按全局禁用，需要启用的方案来进行处理
常见设置
对于移动端常用的比如禁用电话号码识别等可自行搜索，这里不再记录
图标
移动端建议图标使用svg，iconfont在移动端载入较慢，会出现闪现的效果，对于重要的比如loading图标，建议使用svg，避免iconfont不能第一时间出现的问题
布局
如果页面要固定头部或尾部，我们可以使用fixed定位来实现(常用) 也可以头尾用fixed或绝对定位，中间放一个可滚动的容器 也可以使用flex进行定位，头尾一般定高，中间可滚动并设置自动填充剩余高度 如果页面没有其它特殊要求，一般使用第一个方案，其它2个方案供参考
touch-action
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action https://caniuse.com/#search=touch-action web页面常见的误操作是双指或双击放大，我们可以使用touch-action来禁用。 通常web页面设计为宽度自适应，高度随内容。即可以上下滚动，一般不左右滚动，左右滚动常用于一些导航或tab导航上 这时候我们就可以在body上设置touch-action:pan-y，让整个页面仅支持上下滚动，其它如双指放大等则不再有效。 在需要水平滚动的节点上添加touch-action:pan-x支持水平滚动，这样整个页面就不会因误操作放大缩小了。 touch-action:none可禁止滚动，比如在有fixed定位的页面上，如果有输入框，当输入框聚焦唤起软键盘时，这些fixed定位的元素会失效，随页面滚动。如果我们在唤起软键盘时，给body添加touch-action:none，可阻止滚动，这样这些fixed定位的元素就不会跑来跑去了。
禁用长按
https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select https://caniuse.com/#search=user-select 长按一般会呼出复制粘贴功能，建议对整个页面设置user-select:none禁用，对input等可供输入的启用，这样就能避免误操作出现复制粘贴等功能。 对需要复制的内容，可以提供复制按钮