上篇文章本来说简单总结一下移动端兼容问题，但是写着写着就觉得这个东西不是一时半会就能说完的，所以索性慢慢来吧，把能够想到的都给全部罗列一边吧，万一刚好有你需要的那一个呢？好了，话不多说！
话不多说，翠花，上干货啦！
这次来总结一些零碎的小问题吧
h5页面窗口自动调整到设备宽度并禁止用户缩放页面
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
移动端click屏幕产生200-300ms的延时响应
这个问题在我们开发项目时是最容易遇到的也是最可能忽略的，因为我们在平时的开发中已经习惯了用click来触发点击事件，在PC端的时候是没有的问题的，但是却忽略了在移动端出现的延迟问题，其实原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案：
1.fastclick插件：
原理： 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉；
使用:
引入
<script type='application/javascript' src='/path/to/fastclick.js'></script>
使用了jquery的时候
$(function() {
FastClick.attach(document.body);
});
没使用jquery的时候
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
在vue或react中使用
安装
npm install fastclick -S
引入
import FastClick from 'fastclick'
使用
FastClick.attach(document.body);
2.zepto的touch模块，tap事件，
原理：利用touchstart和touchend来模拟click事件
使用：因为zepto本身就是为移动端打造的jquery,使用起来和jquery基本一模一样。至于jq怎么用不用多说了吧？
ios 设置input 按钮样式会被默认样式覆盖
解决办法
input，textarea{
border:0;
-webkit-appearance: none;
}
今天就写到这里，下次再想起来其他的再更吧!希望对你有一点点的帮助！
网友评论