Android
-
Android的物理返回键如果不做处理，会导致web页面上下级页面之间跳转混乱。
解决方案：当下级页面跳转到上级页面时，使用location.replace(url)，这样不会保留下级页面的历史记录，物理返回键也就不会回退回来。 -
如果页面包含position:absolue或fixed的元素，当虚拟键盘唤起时，整个页面UI会出现混乱，其中absolue比fixed产生的混乱还要诡异。这是因为Android虚拟键盘唤起时，页面的高度会重新计算而变小。
解决方案：有虚拟键盘唤起的页面，不要使用absolute定位，使用fixed定位的元素的情况，可以监听window.onresize事件，当document.body.clientHeight变小时，把fixed定位的元素临时修改为static定位；document.body.clientHeight恢复时，再修改回来。
以上解决方案会有些问题，因为当手机横屏的时候也会触发window.onresize并且clientHeight也变小了，所以应该添加一个条件，即同时要判断clientWidth的值，如果clientWidth值变大了那就是手机横屏了，此时不需要做处理，但如果clientWidth没有变化，则按之前的方案修改fixed定位元素为static~
还有另外的几个解决方案，比如禁用手机横屏：
// 注意，这种方案的缺点是兼容性感人
<metaname="screen-orientation" content="portrait">
<metaname="x5-orientation" content="portrait">
或者用js监听手机横屏事件：
// 注意，这种方案仍然有兼容性问题
window.addEventListener("orientationchange", function() {
switch(window.orientation) {
case 90:
case -90:
// 此时为横屏
break;
default:
// 否则为竖屏
break;
}
}, false);
- 使用rem单位时，有些Android设备解析出的尺寸会变大，比如华为某款手机，html的font-size明明为36px，但是width为10rem的元素宽度竟然为414px。
解决方案：在flexible.js之后，还要手写js获取body元素的offsetWidth，判断是否和预期一致，若不一致，则手动设置style.width使之达到预期效果。
iOS
-
input、select元素自带无法覆盖的样式。
解决方案：-webkit-appearance:none; -
new Date(string)有问题，不支持"2017-7-12"，支持"2017/7/12"，或者 new Date(2017,7,12,12,12,12) 这种格式。
以下是我手写的一个转化函数
function createIOSDate(string) {
let date = new Date(0);
value = string.replace(/-|:|./g, " ").split(" ");
date.setFullYear(value[0]);
date.setMonth(value[1]-1);
date.setDate(value[2]);
date.setHours(value[3]);
date.setMinutes(value[4]);
date.setSeconds(value[5]);
return date;
}
综合
-
在zepto.js的某些版本，tap事件有bug，点击会触发两次回调函数。
解决方案：将源码中的 touchend 修改为 touchEnd。 -
网页常用meta标签
<!-- viewport 禁止用户缩放，若使用flexible.js则会自动设置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-app-capable" content="yes">
<!-- 改变顶部状态条的颜色 -->
<meta name="apple-mobile-app-status-bar-style" content="black">
<!-- 页面描述 -->
<meta name="description" content="">
<!-- 页面关键词 -->
<meta name="keywords" content="html, css, js">
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- DNS预解析 -->
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://a.b.c.com" />
-
手机端的chrome浏览器以及facebook app中的浏览器，都会有一个效果，当网页内容超过一屏时，会改变顶部地址栏的高度，时大时小或隐或现。这导致浏览器可视高度发生变化，在实现动态吸顶效果时候会被坑。
解决方案：监听window的resize事件，根据window.innerHeight调整元素位置。 -
在最新的 DOM 规范中，事件绑定函数的第三个参数变成了对象：
target.addEventListener(type, listener[, options]);
我们可以通过传递 {passive: true} 来明确告诉浏览器，事件处理程序不会调用 preventDefault 来阻止默认滑动行为，从而提高事件监听的性能。
- 移动端canvas的width、height不支持rem单位。
解决方案：使用js计算百分比尺寸，再为canvas赋值。
网友评论