移动端页面开发

如何在手机上调试

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容