文章/答案/技术大牛

发布

js禁止触屏缩放页面

在JavaScript中禁止触屏缩放页面通常涉及到对HTML文档的<meta>标签的设置以及可能需要的JavaScript事件监听。以下是基础概念和相关操作的详细解释：

基础概念

触屏缩放：在移动设备上，用户可以通过捏合手势来放大或缩小网页视图。

viewport：这是用户在网页上看到的可视区域。通过<meta>标签的viewport属性，开发者可以控制这个区域的行为。

类型

用户缩放：允许用户通过手势缩放页面。
禁止缩放：通过设置viewport属性来禁止用户缩放。

应用场景

响应式设计：在需要精确控制页面元素尺寸和布局时。
移动应用内嵌网页：为了保持应用的界面一致性。

实现方法

1. 使用`<meta>`标签

在HTML文件的<head>部分添加以下<meta>标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width：设置视口宽度为设备的宽度。
initial-scale=1.0：设置初始缩放比例为1。
maximum-scale=1.0：设置最大缩放比例为1，即不允许放大。
user-scalable=no：禁止用户缩放。

2. JavaScript事件监听（可选）

虽然<meta>标签通常足够禁止缩放，但在某些情况下，可能需要额外的JavaScript来确保兼容性：

document.addEventListener('touchmove', function(event) {
    if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

这段代码监听touchmove事件，并在检测到非1的缩放比例时阻止默认行为。

可能遇到的问题及解决方法

问题：在某些浏览器或设备上，即使设置了user-scalable=no，用户仍然可以缩放页面。

原因：不同浏览器对viewport属性的支持程度可能有所不同。

解决方法：

确保<meta>标签正确无误地放置在<head>中。
使用JavaScript事件监听作为补充措施。
测试在不同设备和浏览器上的表现，并根据需要进行调整。

通过上述方法，可以有效地禁止触屏缩放页面，从而提供更加稳定和一致的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

为什么鼠标总是移动到屏幕的左上角？

mouse

我的Ubuntu12.04安装在笔记本电脑上，今天从软件中心升级。过了一段时间，我发现鼠标总是停留在屏幕的左上方.我试图移动鼠标到其他位置，但它总是快速地移动到左边，我无法操作系统。使用笔记本鼠标或USB鼠标也是同样的问题。有人遇到我的问题了吗？有解决办法吗？

浏览 0提问于2013-09-25得票数 2

1回答

JavaScript -禁用移动设备上的页面刷新

javascript、scroll

问题：在Android browserUsing纯JS上测试了，没有framework.Test在<

浏览 8提问于2021-04-13得票数 0

回答已采纳

1回答

禁用收缩以在允许平移的情况下放大IE10 [触摸屏]

css、windows-8、internet-explorer-10、multi-touch

我想要禁用默认的收缩来缩放它，同时保持它的可滚动性。-ms-touch-action: pan；-ms-content-zooming: none；但内容仍然允许在该区域内进行缩放。如果我删除"-ms-touch-action: then y；“，那么它不再是可缩放的，但也不再是可滚动的。或者，我在想，如果有一种方法可以完全禁用多点触控，那也同样有效，因为我不需要在这个网站上启用任何多点触控手势。

浏览 1提问于2013-08-07得票数 0

1回答

增加对引导选项卡的滑动支持

jquery、twitter-bootstrap、tabs、touch、swipe

是否有可能在带有触摸屏的设备上支持滑动手势，以便在选项卡之间切换？我为旋转木马找到了大量的图书馆，但没有任何标签库。

浏览 2提问于2015-01-31得票数 4

1回答

Touch Table Web Apps

html、multi-touch

似乎有一些API，但我没有找到太多的支持丰富的触摸手势，将适合于更大规模的触摸屏，如触摸桌。例如，Javascript和KineticJS没有内置的收缩、缩放或轻拍手势。

浏览 3提问于2013-05-22得票数 2

1回答

如何在MonoDevelop中完全禁用缩放？

monodevelop、shortcut

我不知道为什么缩放有不可移动的快捷方式，但我不能禁用这个缩放。在最近的版本中，他们用选项键触发了它，但仍然很烦人，因为我使用选项键导航代码。如果我碰触触屏..。这种事经常发生。我怎么才能完全禁用这个缩放呢？任何黑客也是受欢迎的。

浏览 2提问于2013-07-27得票数 0

1回答

检测触屏/触屏是否取消了滚动(动量滚动)

javascript、jquery、mobile

我倾听触屏启动和触屏事件，以使我的应用程序更响应移动。$(window).scroll(function(){

浏览 3提问于2014-11-20得票数 2

2回答

有触摸屏设备的开源浏览器吗？

browser、embedded、arm、embedded-linux、qtembedded

对浏览器的要求如下我发现下面的浏览器有触摸屏支持。 (请告诉我在哪里可以找到这个来源)。

浏览 1提问于2010-04-20得票数 2

1回答

TouchImageView在iOS中的坐标变换

iphone、objective-c、coordinate-transformation

1.只要移动触屏图像，这些代码就可以了。2.如果缩放或旋转触摸屏，ptLeft和ptRight是不正确的。

浏览 4提问于2011-11-19得票数 1

回答已采纳

2回答

android webview放大/缩小错误

android、webview、zooming

我在webview上设置了缩放控制。如果我使用触摸屏缩小(多点触控使用手指)，它在触摸屏的状态下工作。和缩放控件'+‘按钮更改禁用状态(最大缩小状态)我想这是个bug..

浏览 0提问于2012-10-06得票数 0

1回答

Libgdx Android双触摸板问题

java、android、libgdx

我目前在使用两个触摸板时遇到了一个问题，当使用“弹出”模式时，经常会发生错误的触摸板被注册为触摸。这意味着当我使用左侧触摸板时，它有时会在触摸右侧触摸板时将其拾取，因此右侧触摸板的旋钮会移动到触摸板区域的最左边。它主要发生在两个手指“几乎”同时触摸屏幕的时候。我猜我的代码中可能有错误，但我没有看到它。此外，这个问题似乎只有当一个或两个触摸板都处于弹出/不可见模式时才会发生，所以这很可能是问题所在。// MOVEMENT TOUCHPADcase STATIC: if(movementTouchpad.

浏览 0提问于2013-12-06得票数 1

2回答

是否在Windows10中禁用收缩缩放和多点触摸手势？

windows、windows-10、touchscreen、pinchzoom

我把一台LG 23ET63多点触控显示器连接到我的windows pc Windows 10上，希望能以kiosk模式在Chrome上运行一个网站。但目前我在尝试禁用每个浏览器的收缩缩放功能时都遇到了一些问题。2-编辑了以下解决方案中提到的regedit：有很多网站概述了在触摸板上禁用多点触控的步骤，但不包括触摸屏。我相信这绝对是Windows10

浏览 5提问于2018-01-23得票数 3

1回答

WPF墨水画布多点触控？

c#、wpf、multi-touch、inkcanvas

我正在为触摸屏创建一个简单的画图应用程序，并且我一直在努力使用多点触摸手势在墨水画布中进行缩放和旋转，但我还没有找到解决这个问题的方法。有没有一种简单的方法可以在墨水画布中提供多点触控手势？

浏览 1提问于2015-05-12得票数 2

1回答

华硕UX302LG触摸屏上的夹点缩放

asus、multi-touch、touchscreen

该系统只识别多点触控，如3指移动窗口，4指开放破折号，但没有多点触摸手势，包括握住手指在屏幕上。有没有一种方法来激活多点触摸手势，如捏-缩放或旋转的触摸屏上的ASUS-笔记本？

浏览 0提问于2014-03-04得票数 3

1回答

使用HTML5的Windows 7多点触控功能

windows-7、cordova、multi-touch、sencha-touch

我有一个问题:市场上有像Sencha Touch和Phonegap这样的HTML5/CSS3移动框架，它们可以使用iPad/iPhone、Android等的多点触控手势。它工作得很好，我可以测试它。但现在我需要知道基于Windows7操作系统的多点触控显示器有什么用。基于webkit的浏览器，如Safari或Google Chrome，是否也支持多点触控？在一台装有鼠标/键盘的普通PC上，我可以轻敲、双击等等，但当然不需要抓取(用两个手指缩放图片)。这在Win7多点触控显示

浏览 0提问于2010-09-06得票数 1

回答已采纳

1回答

谷歌地图多点触控按键和缩放(桌面)触控pc

windows、zooming、multi-touch

如何在windows7多点触控电脑上缩小和缩放Google地图？我正在建立一个谷歌地图v3基于Javascript的应用程序，这必须是触摸为基础的。不会有键盘-- Windows7触摸屏pc。

浏览 4提问于2011-08-06得票数 4

4回答

带触摸屏的Windows Phone 7模拟器

emulation、windows-phone-7、touchscreen

我在考虑让一个小的来和一起工作...但是开发者工具会支持触摸屏上的多点触控吗？到目前为止，我只在单击鼠标时看到过它……

浏览 0提问于2010-06-12得票数 0

回答已采纳

1回答

两个手指在火狐中发狂

firefox、touchpad

如果在滚动时释放一个手指，则页面滚动到第一个手指所指示的位置。我知道有些人已经意识到这个问题。我找到了一个线程，开发人员正在讨论这个问题，但由于我对Ubuntu (以及一般的Linux )都是新手，我不知道如何处理以下页面中的信息：https://bugs.launchpad.net/ubuntu

浏览 0提问于2012-02-12得票数 0

1回答

激活夹点放大Ubuntu

16.04、touchpad、dell、multi-touch

在Ubuntu16.04(统一)中，如果硬件允许的话，是否有可能在触屏上进行按压-缩放手势？我有一个戴尔XPS 13 (随14.04发布，但我升级了它)和触摸屏允许双指滚动只是很好，但我确实错过了更花哨的多点触摸功能。这个职位解释了如何使用geis-tools包检查触摸屏支持的手指数；我发现我的笔记本实际上检测到五个手指，所以原则上应该是可行的。离题:谁会用五指手势？

浏览 0提问于2016-10-10得票数 3

2回答