如何在手机上调试
1,手机和电脑处于同一个 wifi
2,在电脑上启动一个 http server
- npm i -g node-static
- static --host-address=0.0.0.0
3,找到电脑的局域网 IP,访问
:http://192.168.5.14:8080/index.html
4,边预览边改代码
CSS:
1,border 大法
2,outline 大法
JS:
1,alert
2,自制 console.log
3,
console.log = function(thing){
div.innerText = JSON.stringify(thing)
}
4,
window.onerror
window.onerror = function(message, page, row, column){
alert('出错了\n'+message+'\n'+'行数:'+row+'\n'+'列数:'+column + '\n')
}
5,其他调试方法:weinre.js
测哪些手机:
https://mtj.baidu.com/data/mobile/device
缩放问题:
JS获取宽度:alert(document.documentElement.clientwidth)
<meta name="viewport" content="width=device-width",user-
scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0>
300 ms 延迟
1,为什么会出现 300 ms 延迟
移动端浏览器会有一些默认的行为,比如双击缩放、双击滚动。这些行为,尤其是双击缩放,主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候,移动端浏览器会优先判断用户是否要触发默认的行为,所以才会有300ms延迟。
2,如何阻止 300 ms 延迟
Chrome on Android 的解决办法:https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
FastClick: https://github.com/ftlabs/fastclick#usage