npm install hammerjs
import * as Hammer from 'hammerjs';
// 缩放功能
export class PinchZoom {
static hammerIt(elmid: string) {
const elm = document.getElementById(elmid);
console.log('hammerIt begin elm', elm);
const hammertime = new Hammer(elm, { touchAction: 'pan-x pan-y' }); // 兼容x轴和y轴方向的滚动
hammertime.get('pinch').set({
enable: true
});
console.log('hammertime', hammertime);
let posX = 0,
posY = 0,
scale = 1,
last_scale = 1,
last_posX = 0,
last_posY = 0,
max_pos_x = 0,
max_pos_y = 0,
transform = '';
const el = elm;
hammertime.on('panleft panright panup pandown tap press pdoubletap pan pinch panend pinchend', function (ev) {
console.log(ev.type + ' gesture detected.');
if (ev.type === 'doubletap') {
transform =
'translate3d(0, 0, 0) ' +
'scale3d(2, 2, 1) ';
scale = 2;
last_scale = 2;
try {
if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() !== 'matrix(1, 0, 0, 1, 0, 0)') {
transform =
'translate3d(0, 0, 0) ' +
'scale3d(1, 1, 1) ';
scale = 1;
last_scale = 1;
}
} catch (err) { }
// tslint:disable-next-line: deprecation
el.style.webkitTransform = transform;
transform = '';
}
// pan
if (scale !== 1) {
posX = last_posX + ev.deltaX;
posY = last_posY + ev.deltaY;
max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
if (posX > max_pos_x) {
posX = max_pos_x;
}
if (posX < -max_pos_x) {
posX = -max_pos_x;
}
if (posY > max_pos_y) {
posY = max_pos_y;
}
if (posY < -max_pos_y) {
posY = -max_pos_y;
}
}
// pinch
if (ev.type === 'pinch') {
scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
}
if (ev.type === 'pinchend') { last_scale = scale; }
// panend
if (ev.type === 'panend') {
last_posX = posX < max_pos_x ? posX : max_pos_x;
last_posY = posY < max_pos_y ? posY : max_pos_y;
}
if (scale !== 1) {
transform =
'translate3d(' + posX + 'px,' + posY + 'px, 0) ' +
'scale3d(' + scale + ', ' + scale + ', 1)';
}
if (transform) {
// tslint:disable-next-line: deprecation
el.style.webkitTransform = transform;
}
});
}
}
// html文件
// 定义个缩放区域
<div id="pinchzoom">
<div>
<img src="你的图片地址" >
</div>
<div>放大缩小</div>
</div>
// ts文件
...
import { PinchZoom } from 'xxxx'; // 引入手写的缩放功能类
...
// 启动缩放功能
ngOnInit() {
const elm = document.getElementById('pinchzoom');
PinchZoom.hammerIt(elm);
}
有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。
在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN-NaN ,例如getTime()在ios上拿不到时间戳显示NaN
因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。
移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...
这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...
由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生
在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式
移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)
随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!