如何使用Javascript (或Electron)将chrome置于设备模式(以启用触摸事件) - 腾讯云开发者社区

文章/答案/技术大牛

发布

你无法检测到触摸屏

这意味着，你可以得到的系统的唯一信息是浏览器以HTML，CSS和JavaScript API的形式向你公开的那些。...Chrome 团队用一次升级“修复”了这个问题，它只在当启动时检测到了可触摸输入设备时才启用触摸接口。所以我们都没问题了，对吧？不完全是。接口的接口 ¶ 对于设备本身，浏览器仍然有相当远的距离。...一些 BlackBerry OS 的版本也已被知道在非触摸设备上持久启用了触摸的接口。所以看起来浏览器也不能百分之一百的确定检测触屏设备。如果浏览器都不知道，那我们的应用又怎么知道呢？...最初的 iPhone （在2007年发布）是第一个支持 Touch Events 的设备，但是，从二十世纪70年代开始触摸屏已经以一种或另一种形式存在。...如果你意识到这些检测方法的风险和他们所暗含的臆断，不管怎么样，这当然是由你决定是否使用他们。然而，如果你不确定，或你的论点是“支持每一个设备”，下面的建议可能是有用的。

2.5K2 0

仅仅过去 4 年，微软最终放弃了它！

前不久，微软 Teams 高级副总裁宣布，Teams 将放弃 Electron，转而匹配微软自己的 Edge WebView2 渲染引擎以寻求性能提升。...而对于使用共享 WebView2 运行时的应用程序，版本维护则依靠 WebView2 自己的更新程序，会以类似 Chrome 或 Edge 的方式独立于应用程序之外运行。...Electron 还提供关于如何选择安全模式的详尽说明文档，而 WebView2 则提供丰富的安全最佳实践。...虽然 Electron 支持非沙箱渲染进程，但也有不少应用会选择启用沙箱以提升安全水平。...因此从 Edge 93 开始，WebView2 将对网络事件使用 CBOR。

3.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

现代浏览器探秘(part4)：事件处理

从浏览器的角度看输入事件当你听到“输入事件”时，可能只会想到在文本框打字或鼠标单击，但从浏览器的角度来看，输入意味着来自用户的所有动作。鼠标滚轮滚动是输入事件，触摸或者鼠标移动也是输入事件。...2：将鼠标悬停在页面图层上了解非快速可滚动区域由于JavaScript是运行在主线程上的，所以当合成页面时，合成器线程会标记页面的一个区域，该区域将事件处理程序附加为“非快速可滚动区域”。...你可能看到过或写过类似下面的代码。 ? 由于你只需要为所有元素编写一个事件处理程序，因此该事件委托模式在工程上很有吸引力。但是如果从浏览器的角度来看这段代码，整个页面都被标记成了非快速可滚动区域。...对于输入来说，典型的触摸屏设备每秒发送60-120次触摸事件，而典型的鼠标每秒发送100次事件。输入事件具有比屏幕刷新更高的保真度。...启用 sync-script: 'none' 时，将禁止解析器阻止 JavaScript 执行。这可以防止你的代码阻止解析器，并且浏览器也不需要担心暂停解析器。总结 ?

1.8K2 0

Electron 吞噬资源，微软 Teams 为性能改用 WebView2

前不久，微软 Teams 高级副总裁宣布，Teams 将放弃使用 Electron，转而匹配微软自己的 Edge WebView2 渲染引擎以寻求性能提升。...而对于使用共享 WebView2 运行时的应用程序，版本维护则依靠 WebView2 自己的更新程序，会以类似 Chrome 或 Edge 的方式独立于应用程序之外运行。...Electron 还提供关于如何选择安全模式的详尽说明文档，而 WebView2 则提供丰富的安全最佳实践。...虽然 Electron 支持非沙箱渲染进程，但也有不少应用会选择启用沙箱以提升安全水平。...因此从 Edge 93 开始，WebView2 将对网络事件使用 CBOR。

4.4K5 0

远程调试 Android 设备使用入门

在运行 Android 4.2 及更新版本的设备上，Developer options 默认情况下处于隐藏状态。请参阅启用设备上的开发者选项以了解如何启用它。在您的开发计算机上打开 Chrome。...您应使用您的一个 Google 帐户登录到 Chrome。远程调试在隐身模式或访客模式下无法运行。打开 DevTools。...image.png 已启用 Discover USB devices 使用一根 USB 电缆将 Android 设备直接连接到您的开发计算机。请勿使用任何中间 USB 集线器。...（10）]，然后在您的 Android 设备屏幕上点按此元素。请注意，Select Element 将在第一次触摸后停用，因此，每次想要使用此功能时您都需要重新启用它。...您可以通过多种方式与抓屏互动：将点击转变为点按，在设备上触发适当的触摸事件。将计算机上的按键发送至设备。要模拟双指张合手势，请按住 Shift 拖动。

1.8K3 0

前端开发必备之Chrome开发者工具（上篇）

本文介绍的 Chrome 开发者工具基于 Chrome 65版本，如果你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本简介 Chrome 开发者工具是一套内置于 Google...（Memory）应用面板（Application）安全面板（Security）主菜单（Customize and control DevTools）设备模式（device toolbar）使用...Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站该模式不可替代真实设备测试切换 Device Mode 按钮可以打开或关闭 Device Mode ?...选择设备 ? 通过该视图控件，你可以设定下面两种模式：自适应。使视口可以通过任意一侧的大手柄随意调整大小特定设备。...会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置控制台面板（Console）在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript

11.5K11 1

JavaScript 开发者需要了解的15个 DevTools 技巧

使用隐身模式隐身模式或私有模式会使用单独的用户配置文件，在浏览器重新启动之后不会保留 Cookie，localStorage或缓存文件之类的数据。...最好创建一个新的快捷方式或脚本启动在开发模式，然后为 Chrome 添加下面的配置: --incognito 以隐身模式开始 --auto-open-devtools-for-tabs 启动 DevTools...启用本地文件替代 Chrome 允许任何 HTTP 请求使用你的设备上的本地文件，而不是通过网络获取它。...可以在 Chrome 中或使用任何代码编辑器来编辑文件，每当重新加载页面时，都将使用更新的版本。 14. 管理客户端存储网页可以使用多种技术将数据存储在客户端上。...使用预设或自定义指标设置设备方向。你可以点击和智能手机拖到绕X任何Ÿ轴，或按住 Shift 围绕旋转z轴。强制触摸而不是鼠标或其他本机设备事件。设置空闲状态以检查你的应用如何响应锁定屏幕。

7K2 0

WEB小游戏开发之贪吃蛇游戏项目说明

- 随机生成食物，确保不与蛇身重叠游戏循环 - 使用requestAnimationFrame实现流畅的游戏循环性能优化帧率控制 - 维持稳定的60fps游戏体验事件委托 - 减少事件监听器数量...备注 iOS设备 ✅ 完全支持 iPhone 6及以上机型体验最佳 Android设备 ✅ 完全支持 Android 5.0及以上系统平板电脑 ✅ 完全支持包括iPad和Android平板触摸屏笔记本...类处理，负责：触摸事件：监听和处理触摸事件方向控制：将触摸转换为方向控制手势识别：识别滑动和点击手势虚拟按钮：实现屏幕上的虚拟控制按钮 GameStorage类数据持久化由GameStorage...如何在移动设备上获得最佳体验？建议将设备横屏使用，这样可以获得更大的游戏区域。同时，可以在设置中启用滑动控制，使操作更加直观。游戏会保存我的最高分吗？...如何切换主题？点击游戏界面右上角的主题切换按钮即可在深色和浅色主题之间切换。

7141 1

移动端点击事件延迟的诞生消亡史

尽管此解决方案非常巧妙，背后却以牺牲整个页面缩放为代价，带来的影响是对于页面上的图像或小文本，想要进行缩放变得难以完成。...指针事件指针事件是 Microsoft 提出的一系列针对 Web 的新事件，现已成为 W3C 规范。指针事件规范是尝试使用单个事件模型统一我们对所有输入类型（鼠标，触摸，手写笔等）的处理。...根据规范，CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。...（注意：这也将禁用双指缩放功能，因此它与我们前面讨论的与禁用缩放相关的可访问性和可用性问题相同）。...启用平移和双指缩放手势，但禁用其他非标准手势，例如双击缩放。禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。

3.8K2 0

jimojianghu

然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport 来处理。...因为笔记本触摸板双指滑动，将响应该事件，如果对该事件阻止默认行为，就能解决缩放问题了。注意： passive: false 必须使用，下面会介绍。...none 当触控事件发生在元素上时，不进行任何操作。 pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。...启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。...笔记本触摸板双指滑动，将响应滚轮事件，因此可以监听该事件，禁止触摸板手指缩放界面。但需要注意滚轮默认事件，如会导致子元素滚动失效，这时候就要在子元素上阻止相同事件冒泡。

4.7K0 0

Electron 9.0.0发布！带来三项重大改进，不再支持Electron 6

开发者可以在 npm 上使用 npm install electro@latest 命令安装，或从 Electron 的发行网站下载： https://electronjs.org/releases/stable...Linux 上的窗口事件处理程序效率提升。#23260。新增 PDF 查看器。#22131。...这个 issue 详细介绍了完整的信息和建议的时间表： https://github.com/electron/electron/issues/18397 现在，通过 IPC 发送非 JavaScript...Electron 内部或应用的预加载脚本中。...关于 contextIsolation 的介绍、启用方法以及安全性细节，请参阅我们专门编写的 Context Isolation 文档： https://github.com/electron/electron

2.3K1 0

Electron启程

前言 Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。...相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。...crashReporter 将崩溃日志提交给远程服务器。 nativeImage 使用 PNG 或 JPG 文件创建托盘、dock和应用程序图标。 shell 使用默认应用程序管理文件和 url。...你还可以用 Electron 内的 IPC 机制实现。将数据存在主进程的某个全局变量中，然后在多个渲染进程中使用 remote 模块来访问它。...中使用普通的引入的办法会引发异常，原因是 Electron 默认启用了 Node.js 的 require 模块，而这些框架为了支持 commondJS 标准，当 Window 中存在 require

6.1K3 0

前端开发必备之Chrome开发者工具（下篇）

查找这些问题需要很好地了解客户端与服务器如何通信，以及协议施加的限制。已被加入队列或已被停止的系列最常见问题是一系列已被加入队列或已被停止的条目。这表明正在从单个网域检索太多的资源。...测试时间是否缩短的最简单方法是将您的应用置于其他主机上，并查看 TTFB 是否有所改善。达到吞吐量能力又称：大片蓝色 ?...检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。检查源使用左侧面板可以检查各个安全或非安全源。点击安全源查看该源的连接和证书详情。 ?...Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降低测试的开销。模拟地理定位坐标以测试地理定位替换值。模拟设备方向以测试加速度计数据。...注：如果您的应用检测到使用 JavaScript（如 Modernizr）的传感器加载，请确保在启用传感器模拟器之后重新加载页面。

2.3K11 1

用JS开发跨平台桌面应用，从原理到实践

3.1 Chromium Chromium是Google为发展Chrome浏览器而启动的开源项目，Chromium相当于Chrome的工程版或称实验版，新功能会率先在Chromium上实现，待验证后才会应用在...3.2 Node.js Node.js是一个让JavaScript运行在服务端的开发平台，Node使用事件驱动，非阻塞I/O模型而得以轻量和高效。...在开发模式上，Electron在调用系统API和绘制界面上是分离开发的，下面我们来看看Electron关于进程如何划分。...同原生 JavaScript 事件类似，采用了发布/订阅(观察者)的方式，使用内部 _events 列表来记录注册的事件处理器。...首先要监听窗口的关闭事件，阻止用户关闭操作的默认行为，将窗口隐藏。

8.2K5 0

Electron开发鸿蒙PC应用环境搭建指南

Electron HarmonyOS 开发环境搭建完整指南前言 Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。...4.3 连接设备使用 USB Type-C 数据线连接开发电脑和鸿蒙设备在设备上启用开发者模式和 USB 调试在 DevEco Studio 中确认设备已连接（顶部工具栏会显示设备名称） 4.4...: 资源占用过高或设备性能不足解决方案: 优化 Electron 应用代码，减少资源占用使用 chrome://inspect 进行性能分析确保设备有足够的可用内存进阶开发指南调用鸿蒙原生能力....pdf 性能优化建议减少主进程负载: 将计算密集型任务移到渲染进程或 Worker 使用懒加载: 按需加载页面和资源优化资源大小: 压缩图片、精简依赖包启用缓存: 合理使用本地存储和缓存机制...10] - 原生模块开发指南社区支持 Electron Discord 社区[11] 问题反馈[12] - 提交 Bug 或功能请求技术交流群：欢迎通过仓库联系方式加入总结通过本指南，你已经学会了如何

1.1K1 1

Electron框架介绍

简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。您可以通过使用 app.whenReady() API来监听此事件。...path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。我们使用一个相对当前正在执行JavaScript文件的路径，这样您的相对路径将在开发模式和打包模式中都将有效。...额外：将功能添加到您的网页内容此刻，您可能想知道如何为您的应用程序添加更多功能。对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。.../renderer.js"> 复制然后，renderer.js 中包含的代码可以使用与典型前端开发相同的 JavaScript API 和工具，例如使用 webpack 来捆绑和缩小您的代码或使用

1.3K0 0

Electron 介绍

# 简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...稍后我们将使用 JavaScript 动态插入它们。 # 在窗口中打开您的页面现在您有了一个页面，将它加载进应用窗口中。...我们使用一个相对当前正在执行JavaScript文件的路径，这样您的相对路径将在开发模式和打包模式中都将有效。 # 额外：将功能添加到您的网页内容此刻，您可能想知道如何为您的应用程序添加更多功能。...new window) 来捆绑和缩小您的代码或使用 React (opens new window) 来管理您的用户界面。...// preload.js // 所有Node.js API都可以在预加载过程中使用。 // 它拥有与Chrome扩展一样的沙盒。

3K1 0

接上一篇事件详解

事件，这个事件可以在任何元素上触发，最终会冒泡到document（IE8）或window（IE9,Opera,Chrome,Safari）对象，与mousewheel事件对应的event对象外，还有一个属性...将mousewheel事件给页面任何元素或document对象，即可处理鼠标滚轮操作；如下代码： EventUtil.addHandler(btn,'mousewheel',function(e){...)，在Ajax应用中，开发人员经常使用url参数列表保存状态或导航信息；我们必须把hashchange事件添加到window对象中，然后当url参数列表只要发生变化就会调用此事件，此事件对象event...事件苹果公司为移动safari添加的orientationchange事件是能让用户确定何时将设备由横向查看模式切换到纵向模式触发的事件；此属性中包含三个值，0表示肖像模式；90表示向左旋转的横向模式...（主屏幕按钮在右侧），-90表示向右旋转的横向模式(主屏幕按钮在左侧)，理解移动端的事件—触摸与手势事件有以下几个触摸事件： touchstart: 当手指触摸屏幕时触发，即使是一个手指放在屏幕上也会触发

2.7K6 0

第一章 Electron介绍 | Electron in Action(中译)

在本书中，您将学习如何构建使用Windows，macOS和Linux上的本机操作系统API的应用程序。 Electron将Chromium和Node.js合并到同一个运行环境中。...Electron将两个平台结合在一起，允许您使用JavaScript构建一个全新的应用程序类。...Particle－生产用于创建定制硬件的开发工具包，它的IDE使用了Electron，该IDE允许用户编写代码，并通过蜂窝网络或Wi-Fi网络将代码部署到硬件设备上。...在本书中，我不会涉及变量或条件，但是如果您熟悉JavaScript的一般语言特性，那么，你可能就具备了必要的技能。如果您熟悉Node中的一些约定和模式，这也很有帮助。如模块系统如何工作。...您的用户可能正在使用最新版本的现代浏览器，如Chrome或Firefox，也可能正在使用过时版本的Internet Explorer。在何处呈现和执行代码，您几乎没有发言权。你必须做好一切准备。

4.4K3 0

现代浏览器内部机制（四）：换个角度看事件

鼠标滚轮的滚动是一种输入事件，触摸或者鼠标滑过也是一种输入事件。...非快速滚动区域因为运行 JavaScript 是主线程的任务，当一个页面被合成，合成器线程将页面上挂在了事件处理器的区域标记为“非快速滚动区域”。...对于输入事件来说，主流的触摸屏会以每秒 60 到 120 次的频率向主线程传递触摸事件，大多数的鼠标事件都被以每秒 100 次的频率传递给主线程。输入事件的保真度是普遍高于主流屏幕的刷新能力的。...为了减少主线程的负担，Chrome 将常见的连续事件进行了合并（比如 wheel、mousewheel、mousemove、pointermove、touchmove 等），并且在 requestAnimationFrame...学习如何度量性能不同的网站对于性能的需求可能不同，因此找到合适的度量方法以及优化方案是至关重要的。Chrome 的开发者工具团队有话说：通过 Chrome Devtools 优化网站性能[4]。

1.3K2 0

点击加载更多

你无法检测到触摸屏

仅仅过去 4 年，微软最终放弃了它！

现代浏览器探秘(part4)：事件处理

Electron 吞噬资源，微软 Teams 为性能改用 WebView2

远程调试 Android 设备使用入门

前端开发必备之Chrome开发者工具（上篇）

JavaScript 开发者需要了解的15个 DevTools 技巧

WEB小游戏开发之贪吃蛇游戏项目说明

移动端点击事件延迟的诞生消亡史

jimojianghu

Electron 9.0.0发布！带来三项重大改进，不再支持Electron 6

Electron启程

前端开发必备之Chrome开发者工具（下篇）

用JS开发跨平台桌面应用，从原理到实践

Electron开发鸿蒙PC应用环境搭建指南

Electron框架介绍

Electron 介绍

接上一篇事件详解

第一章 Electron介绍 | Electron in Action(中译)

现代浏览器内部机制（四）：换个角度看事件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐