艾欢欢的博客

场景看下面两张图，文本框（ input 或 textarea ）获取焦点时，手机自带的键盘会被唤起，从而导致视口高度变小，从而导致处于 fixed 定位且设置 bottom 属性的元素，会被键盘顶上去，浮于键盘上方。（由于手机内部机制不同，仅安卓出现这种问题） 解决方案思路监听当前视口的变化：当视口大小发生改变时，判断变化后的视口高度是否小于初始的窗口高度，是则隐藏相关元素；反之，显示相关元素主要代码const WIN_HEIGHT = window.innerHeightwindow

场景在移动端通过 H5 的 canvas 标签绘制图表的时候，不经过任何处理的图表相比较其他元素看起来会有些模糊。序先看下面一组高分屏下的圆，上面是普通 div 元素“绘制”的圆，下面是通过 canvas 绘制的圆。可以看出，下面的圆相比较是模糊的。为什么会这样？一台普通屏幕上的像素（逻辑像素），可以当做是正常的像素（css中设置的像素），当画一个100px的元素，他就是一个100px的元素。但是，在出现了一些高分辨率的屏幕之后，就发生了一些变化。随之也出现了一个属性 devicePixelR

在ios中软键盘弹起时，仅会引起 $('body').scrollTop 值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；在android中软键盘弹起或收起时，会改变window的高度，因此监听window的 onresize 事件；一、Android端监听...

主要代码var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isAndroid){ ...

注意 ：增加之后需要对input做另外设置，不然输入框无法输入ios手机默认可以长按选择复制，如不想长按选择，可以用以下代码取消：*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/...