以下是一个简单的 HTML 页面,可用于在 iPhone 或其他 iOS 设备上测试屏幕的多点触控功能。打开本页面后,用手指在下方区域触摸、滑动或多指操作,即可看到触摸点实时显示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>iPhone 触摸测试</title>
<style>
body { margin: 0; padding: 20px; background: #f0f0f0; }
#touchArea {
width: 100%;
height: 300px;
background: white;
border: 2px dashed #ccc;
position: relative;
touch-action: none;
}
.point {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>
</head>
<body>
<div id="touchArea"></div>
<script>
const area = document.getElementById('touchArea');
function updateTouches(e) {
e.preventDefault();
area.innerHTML = '';
for (let touch of e.changedTouches || []) {
const dot = document.createElement('div');
dot.className = 'point';
dot.style.left = touch.clientX + 'px';
dot.style.top = touch.clientY + 'px';
area.appendChild(dot);
}
}
area.addEventListener('touchstart', updateTouches);
area.addEventListener('touchmove', updateTouches);
area.addEventListener('touchend', updateTouches);
</script>
</body>
</html>