mobile web坑全集

[Jesse]

记录移动端的web开发坑

• -webkit-text-size-adjust: none;
  以前只知道这个属性在chrome上，用来处理font-size < 12px时，chrome强制用 12px渲染。昨天才知道，原来还能禁止 iPhone6上浏览器把文字放大 ，比如设置的 font-size: 24px，实际渲染出来可能是 font-size: 28px。
  相关链接： some-font-sizes-rendered-larger-on-safari-iphone

[Jesse]

ios active 效果

在 iOS 上启用 active 状态支持
遗憾的是，iOS 上的 Safari 默认情况下不应用 active 状态，要将它启用，您需要向 document body 或每个元素添加一个 touchstart 事件侦听器。

此操作应在 User Agent 测试之后进行，这样它就只能运行在 iOS 设备上。

向 body 添加触摸开始的优点是可以应用于 DOM 中的所有元素，但这可能会在滚动页面时带来性能问题。

window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
替代方案是向页面中的所有可交互元素添加触摸开始侦听器，从而缓解部分性能问题。

window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
var elements = document.querySelectorAll('button');
var emptyFunction = function() {};
for(var i = 0; i < elements.length; i++) {
elements[i].addEventListener('touchstart', emptyFunction, false);
}
}
};

[Jesse]

document.documentElement.scrollTop 获取到0

在部分 android 的 webview 和 自带浏览器下，包括 (mix2s等)，通过 document.documentElement.scrollTop 获取到的值始终是 0，必须要通过 document.body.scrollTop 才能获取到正确的值！但是在 android的 chrome 上，没这个问题！

可以查看 这个demo链接

下面是来自 小米mix2s 的自带浏览器，微信浏览器结果也一样：

在同一个手机上，chrome浏览器里是正常的，截图如下：

[Jesse]

iOS 12 UIWebView 不缓存背景图片 background-image

有这样一个场景，我们有个弹窗，弹窗内容有一张背景图片，理论上，背景图片只应该在第一次展示的时候请求一次，在不关闭 页面的情况下，后续展示这张背景图片浏览器都会使用内存缓存，不会发起额外的http去请求这张图片。

在chrome和Safari上，确实符合预期。但是在APP里的 UIWebView，发现每次显示弹窗的时候，都会重新去请求背景图片，导致每次都会闪现，用户体验不理想。

经过这个测试页面 https://jsbin.com/pidahiy/17/edit?js ，基本可以得出以下结论(都是针对iOS12的 UIWebView)：

• UIWebView 不缓存 background-image 这样的背景图片
• UIWebView 会缓存 <img /> 标签加载的图片
• 可以通过持有一个图片的对象，来使得 UIWebView 缓存 background-image

比如，我们可以在 window 上挂载一个全局变量，来缓存某个URL对应的图片

window.imageForceCache = new Image();
window.imageForceCache.src = 'https://xx.com/some/url/to/image';