H5 这些细节在 Chrome 中是模拟不到的

作者:vkvi 来源:ITPOW(原创) 日期:2018-8-11

Chrome 可以模拟手机访问网页,但是有些问题是模拟不到的。

1、高度

Chrome 模拟的尺寸是屏幕的尺寸,但是手机中有时间、信号那一栏占了高度,AppBar 占了高度,App 底部可能也会占用高度。

2、软键盘

手机中输入时会弹出软键盘影响布局,但是 Chrome 中没有,有时候一些细节就容易被忽略。

3、最坑的自动高度

这才是最坑的。假如一个 img,我们指定了宽度,高度是自动的,那么我们在 Chrome 中看到的高度就是根据图片比例和宽度算出来的高度。

但是在手机中,这个高度很可能是 0!!所以我们常常这么干:height = $(".img").width() * HEIGHT / WIDTH,而不是 height = $(".img").height()。即使代码中放在 $(window).ready() 也是如此。

不过你可以尝试一下 $(window).load(),据说这个是所有图片、CSS 等加载完了执行,而 $(window).ready() 仅仅是 HTML 加载完执行。

相关文章