如何阻止上下文菜单在Chrome的设备视图中显示

在Chrome的设备视图中阻止上下文菜单显示的方法是通过CSS的touch-action属性来实现。touch-action属性用于定义触摸事件的默认行为，包括滚动、缩放和上下文菜单的显示。

要阻止上下文菜单在Chrome的设备视图中显示，可以将touch-action属性设置为none。这样，当用户长按屏幕时，将不会触发上下文菜单的显示。

以下是一个示例的CSS代码，可以应用于需要阻止上下文菜单显示的元素上：

.element {
  touch-action: none;
}

在上述代码中，.element是需要阻止上下文菜单显示的元素的选择器。通过将该元素的touch-action属性设置为none，可以阻止上下文菜单在Chrome的设备视图中显示。

请注意，这种方法只适用于Chrome浏览器的设备视图，对于其他浏览器或桌面视图可能不起作用。此外，使用touch-action: none可能会影响其他触摸事件的行为，因此在使用时需要谨慎考虑。

腾讯云相关产品和产品介绍链接地址：

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

有帮助

没帮助

相关·内容

什么是移动端开发【重点学习系列—干货十足–一万字详解】

浏览器默认行为为什么要阻止这些默认行为如何阻止默认行为后遗症灵丹妙药事件对象属性 touchstart 事件 touchmove 事件触点对象 5-小案例（未完待续—后续补上） 6-适配...设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。...像素比 / N倍屏像素比（DPR dpr）：单一方向上设备物理像素和设备独立像素的比例。像素比的作用程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。...一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。视口大小由浏览器厂商决定，大多数设备的布局视口大小为 980px。...如何阻止默认行为可以给 document 绑定 touchstart 事件，并阻止默认行为，不过需要关闭被动模式。这里推荐创建一个包裹元素，绑定 touchstart 事件并阻止默认行为。

2.5K2 1

Web性能优化：不要与浏览器预加载扫描器对抗

图1：浏览器的主要HTML解析器如何被阻塞的图示。在这种情况下，解析器遇到了一个外部CSS文件的元素，它阻止了浏览器解析文档的其余部分，甚至是渲染任何文档，直到CSS被下载和解析。...因为CSS文件同时阻止了渲染和解析，我们可以通过代理服务为样式表引入两秒的人为延迟。这个延迟使我们更容易在网络瀑布图中看到预加载扫描器的工作情况。...图5：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。该页面包含一个样式表和一个注入的异步脚本。...更糟糕的是，图像被延迟加载，直到懒惰加载器的JavaScript下载、编译和执行之后。图8：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。...图9：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。

5.3K15 1

基于Webkit的浏览器关键渲染路径介绍

关键渲染路径概念浏览器是如何将HTML、JS、CSS、image等资源渲染成可视化的页面的呢？本文简单介绍一下渲染过程中涉及到的关键步骤。该过程分为四步：模型对象的构建、渲染树构建、布局、绘制。...3.布局经过前两步的操作，我们知道了元素的内容和样式信息，但是实际在不同显示器中的大小和位置如何确定呢，这就需要进行布局操作了，有的地方称为"自动重排"（reflow）。...Webkit依据框模型来计算元素的位置和大小，布局输出的是一个"盒模型"对象，该对象包含了每个元素在视口内的确切位置和尺寸。 ? 4.绘制在布局结束后，接下来就是绘制，实现栅格化。...Paint一般通过图像上下文来控制，分为2D和3D绘制上下文。...关键渲染路径开发相关介绍完了关键渲染路径的概念，接下来结合chrome dev-tool来看一下实际的情况，chrome的版本是60.0。

1.3K9 0

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

第二种情况下(Case 2)也是一样的问题如果使用容器查询，我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图，它展示了我们如何使用容器查询来修复这个问题。...当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。...不仅如此，我们还可能有一个组件的变体，它应该只显示在特定的上下文中。例如，事件列表页面。在这种情况下，清楚在何处使用此变体是很重要的。问题是，如何告诉设计师应该在哪里使用这些组件。...注意我是如何将每个变体映射到一个特定的上下文，而不是一个视口。为了进一步证明这一点，我们配合 CSS网格一起使用时，组件的行为会有何不同。...当有足够的空间时，清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元，或CSS比较函数)。

2.2K3 0

Google IO 2019，Chrome 有什么消息？

接着是提高站点性能的工具 Lighthouse，它内置于 Chrome Dev 工具中，作用正如其名，主要用于分析站点，探索并告诉开发者如何利用所有最新的平台功能，以优化网站性能。...同时 Lighthouse 可以为不同网站资源设置权重，只要简单在 JSON 文件中配置相关限制与指标即可实现。 ? 此外还有一系列网页诊断工具。...强大的功能 Chrome 工程师 Paul Lewis 介绍了 Web Perception Toolkit，这是一个开源库，工作原理是从设备摄像头获取信息流，比如条形码、二维码与 logo，并将其传递给一组探测器...Site Isolation 确保来自不同网站的页面始终放入不同的进程，每个进程都在沙箱中运行，该沙箱限制了允许进程执行的操作。同时它还可以阻止进程从其它站点接收某些类型的敏感数据。...Chrome 引入 SameSite 属性，允许用户声明自己的 cookie 是否应限制在第一方或同一站点上下文中，这增强了用户隐私控制权。

7113 0

Chrome 页面呈现原理与性能优化之企业级分享总结(内附完整ppt)

呈现引擎，按图中看，包含了一个 compositor(合成器)和 Javascript Engine(JS解释引擎)。...限制因设备的内存和CPU功率⽽异，但当Chrome达到限制时，它会在⼀个进程中开始从同⼀站点运⾏多个选项卡。有更高的资源占用。...这样可以做到，当 Chrome 在强大的硬件上运行时，它可能会将每个服务拆分为不同的进程，从而提供更高的稳定性，但如果它位于资源约束的设备上，Chrome 会将服务整合到一个进程中，从而整合流程以减少内存使用...通常一个页面可能很大，但是用户只能看到其中的一部分，我们把用户可以看到的这个部分叫做视口（viewport）。...浏览器中的JavaScript运行机制 JavaScript如何工作的，首先要理解几个概念，分别是JS Engine(JS引擎)、Context(执行上下文)、Call Stack(调用栈)、Event

1.6K2 0

你可能不知道的「 CSS 容器查询」

这可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。例如，以下组件可能显示在网站布局的窄或宽列中。如果有空间，它将显示为两列，否则，我们希望将其堆叠显示。...上图中的左右两个组件，是同一个组件，功能上是完全一样的，只是要展示不同的布局。...然后，可以编写一个查询来查找此包含上下文而不是视口大小，以便为组件制定布局决策。使用创建容器查@container。这将查询最近的包含上下文。...另外，上文显示的基本功能都已经可以在Chrome Canary中进行测试。下载Canary，然后转到chrome://flags，搜索Container Queries并启用该标志。...id=1145970 共识和标准 Chrome浏览器中提供功能后，此处列出的值不保证是最新的。

1.6K3 0

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

Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站该模式不可替代真实设备测试切换 Device Mode 按钮可以打开或关闭 Device Mode ?...选择设备 ? 通过该视图控件，你可以设定下面两种模式：自适应。使视口可以通过任意一侧的大手柄随意调整大小特定设备。...将视口锁定为特定设备确切的视口大小，并模拟特定设备特性媒体查询媒体查询是自适应网页设计的基本部分。要查看媒体查询检查器，请在三圆点菜单中点击 Show Media queries。...由于每一条消息的时间戳均不同，因此，每一条消息都将显示在各自的行上 ? 选择执行环境以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector ?...当您在 top 以外的环境中操作时，DevTools 将 Execution Context Selector 突出显示为红色，如下面的屏幕截图中所示。

8.3K11 1

meta 标签知多少

viewport 该属性可以控制视口，但仅供移动设备使用。需要注意的是视口不代表就是手机的屏幕宽高，视口可以设置，就是通过 viewport 这个属性设置的。...viewport 的 content 值如下： width 定义视口的宽度，值一般就是 device-width，表示宽度与设备宽度一致。...； initial-scale 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率，可以取 0.0 到 10.0 的数值，一般是 1.0，表示不缩放，大于 1.0 会把页面放大...follow 告诉搜索引擎爬虫可以爬取本页面上的链接； nofollow 告诉搜索引擎不要爬取本页面上的链接； noodp 搜索引擎的搜索结果中会显示一部分搜索文字上下文的内容，noodp 属性用来阻止使用...DMOZ 信息做为这部分的文字使用； noydir 搜索引擎的搜索结果中会显示一部分搜索文字上下文的内容，noydir 属性会阻止雅虎使用 Yahoo!

1.1K1 0

JavaScript基础学习--零碎

/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要 *document.documentElement.clientWidth或者document.body.clientWidth...（区别与视口）,与上面获取视口大小的方法如出一辙 function getDocumentPort() { if (document.compatMode == "BackCompat") {...').style.[ height | width ] dom.style.width这种方式只能取到行内属性，而不是css属性 5、HTML title属性：定义关于元素的额外信息，这些信息会在鼠标悬浮时显示一段工具提示文本...鼠标悬浮显示nihao 6、各大浏览器对应内核 Trident IE系列 Wenkit Chrome、Safari ...div，点击文档其他地方隐藏div 法一思路： 1、对document做点击事件，隐藏div 2、对btn的点击事件绑定事件处理程序，阻止事件冒泡。

1K7 0

移动端避免使用100vh

CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近，但鉴于其在移动设备上的局限性，最好避免使用它。

1.8K2 0

将 SVG 与媒体查询结合使用

JPEG、WebP、GIF 和 PNG 都是光栅图像格式的示例。光栅图像与分辨率有关。144 PPI（每英寸像素）PNG 图像在具有 144 PPI 显示分辨率的设备上看起来很棒。...因此，矢量图像与分辨率无关，无论显示分辨率或显示尺寸如何，都可以保持其质量。分辨率独立是SVG的最大优势。我们可以在不损失质量的情况下放大或缩小图像。...，但它会阻止 CSS 在多个文档之间共享。...考虑一个徽标，例如下图中虚构的 Hexagon Web Design & Development 的徽标。如果没有媒体查询，这个 SVG 标志会简单地拉伸或收缩以适应视口或其容器。...您现在应该知道如何：使用 CSS 设置 SVG 元素的样式动画 SVG 属性使用 CSS 媒体查询和matchMediaAPI 来显示和隐藏部分 SVG 文档

6.2K0 0

移动端避免使用100vh

大家好，又见面了，我是你们的朋友全栈君。 CSS中的视口单位听起来很棒。...核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...如下所示：当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近，但鉴于其在移动设备上的局限性，最好避免使用它。

2K2 0

浏览器原理学习笔记01—宏观视角下的浏览器

而进程间通过 IPC 机制进行通信(图中虚线部分)。...2.2 目前多进程架构 [8l3y15mise.png] 最新的 Chrome 浏览器包括 5 类进程：浏览器进程 x1：负责界面显示、用户交互、子进程管理、存储等功能渲染进程 xn：将 HTML、...同时在性能受限的设备上 Chrome 还提供灵活的弹性架构，会将很多服务整合到一个进程中，从而节省内存占用。 [yyenpglx0v.png] 3....拥有层叠上下文属性明确定位属性、定义透明属性、使用 CSS 滤镜等的元素拥有层叠上下文属性。 [1vo7cjen0n.png] 2....有的图层很大很长，但用户通过视口(viewport)只能看到页面的很小一部分，为了减小开销，合成线程会将图层划分为图块(tile)，通常大小为 256x256 或 512x512，合成线程会优先把视口附近的图块栅格化转换成位图

1.4K19 8

【Hello CSS】第三章-浏览器的视图与坐标

我们看看下图，图中最小的点就是设备的像素。 ? 分辨率(Image resolution) 分辨率(Image resolution)日常用语中之分辨率多用于影像的清晰度。...那么这该如何实现呢？基于这个问题，W3C提出参考像素这个概念。定义如下：参考像素是设备上一个像素的视角，像素密度为96dpi，离设备长一臂。标准的手臂长度为28英尺，所以视角大概为0.0213度。...如何设置文档viewport？...web api，目前只有chrome 60 +跟Opera 47+支持。...} 坐标系统通过上述对设备屏幕跟视口的介绍，我们应该可以对电子设备中的浏览器显示情况有了基本的了解。那么接下来我们来了解一下浏览器中的坐标系系统。

2.4K2 0

Puppeteer：从零出发，全面掌握浏览器自动化神器

浏览器管理：在入门示例中已经使用过了启动和关闭浏览器的 API，这里主要了解一下浏览器上下文（包含权限）和如何连接到正在运行的浏览器两部分。...浏览器上下文及上下文权限：浏览器上下文的作用是隔离自动换任务，保证 Cookie 和本地存储不会在浏览器上下文之间共享；浏览器上下文所关联的页面会在关闭上下文时一同被关闭；浏览器上下文支持权限配置...JavaScript 函数同样在入门示例中有过使用，但没有提到如何传递参数和其中的一个缺陷。...基础配置：因为调试往往发生在开发环境中，所以提供一个环境变量来动态启动调试的基础配置还是有很帮助的：禁用无头模式：可以查看浏览器显示的内容，主观的观察内容变化；延长执行时间：通过延长执行时间来观察正在发生的情况...().version); console.log(version); PS：Puppeteer 文档显示目前尚无法测试扩展程序的内容脚本。

1.1K1 1

HTMLCSSJS 是如何在浏览器中，渲染成你看到的页面？【图解Chrome】

[image.png] 上图中，描述了具有主线程、工作线程、Compositor 线程、Raster 线程的渲染器进程，以及他们之间的关系。...#JS 可以阻止解析当 HTML 解析器遇到标签的时候，它会暂停解析 HTML 文档，然后对这个 JS 脚本进行加载、解析和执行。...Web 开发人员可以通过多种方式的配置，告知浏览器如何更优雅的加载资源。...即使渲染的计算可以跟上屏幕的刷新速度，可因为此计算是在主线程上执行的，这就意味着 JS 代码的执行，也可能导致它被阻断。 [image.png] 如上图，时间轴上的动画帧，被 JS 阻止了一帧。...光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程。 [305.gif] 也许处理这种情况的一种无脑方案，是在视口（ViewPort）内部将每个组件都光栅化。

4.8K5 0

我用飞桨做了一个菜品图像识别系统

霍夫变换盛载菜品食物的碗盘器具基本是圆形的，因此对餐盘图像去噪后用霍夫圆变换实现对菜品碗盘位置的检测，实现碗盘分离。...数据集准备及处理菜品数据集菜品识别通过飞桨实现，起初对每样菜品拍摄一张俯视图。菜品识别的实质就是图像分类。因此，每个分类只有一个训练图片是肯定不够的。...在上图中的左侧图片框中显示的是菜品摄像头实时拍摄的某帧画面，托盘中有芹菜炒肉、番茄炒蛋和米饭三样菜。...在后端通过霍夫圆处理后并调用模型进行预测，最终将数据返回并在移动端显示，可以从上图中的右侧移动端截图中看到结果预测正确，该预测模型在35种菜品类别的数据集中能达到99%以上的准确度。...硬件主体由一个放置台和两个摄像头组成，通过无线路由器将设备连接在同一测试网络下。本设备中使用的是海康威视网络摄像头。在实物图中，位于上方的摄像头用于人脸识别，下方的摄像头用于识别托盘中的菜品并计价。

4K7 2

图解浏览器

浏览器的架构体系也随着调整变得更加复杂，也会有更高的资源占用。那么如何寻求一种在资源占用和复杂架构体系之间的平衡便成为了一个难题。小孩子才做选择，鱼和熊掌我都要！...Chrome 团队在 2016 年使用“面向服务的架构”(Services Oriented Architecture，简称 SOA)的思想设计了新的 Chrome 架构。...：栈中的垃圾回收比较简单，当一个函数执行结束后，JavaScript 引擎会通过向下移动 ESP 来销毁函数调用栈中所保存的执行上下文，ESP 就是记录当前执行状态的指针。...在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧中，元素下移视口高度的 25％。...在上图中，最大视口尺寸是高度，不稳定元素已经移动了视口高度的 25％，所以距离分数是 0.25。

1.5K3 0

浏览器之性能指标-CLS

❞ 如何确定/设置宽高比确定或设置一个图片的宽高比可以通过以下几种方法实现：使用固定的宽度和高度：如果我们已经确定了要显示的图片的具体宽度和高度，可以直接使用这些数值来计算宽高比。...在下面的动图中，我们的视口保持不变，也没发生页面滚动，但页面自行发生了巨大的位移。作为访问该网站的用户，我们可能「无法确定页面何时完成加载」。...因此产生了剧烈的布局位移。 ❞ CLS有趣的地方在于它可以通过各种工具进行客观测量，但也是以用户为中心的，因为每个用户的设备可能会影响我们网站的布局如何发生位移。...在停止录制后，Chrome开发者工具会返回一个时间轴，显示加载时间、各个请求和核心网络指标。从这个时间轴中，我们可以选择Layout Shifts下列出的各个布局位移事件。...这样，使用srcset属性可以为不同设备和视口尺寸提供最佳的图像质量和性能，实现响应式的图像展示。

8572 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何阻止上下文菜单在Chrome的设备视图中显示

相关·内容

什么是移动端开发【重点学习系列—干货十足–一万字详解】

Web性能优化：不要与浏览器预加载扫描器对抗

基于Webkit的浏览器关键渲染路径介绍

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

Google IO 2019，Chrome 有什么消息？

Chrome 页面呈现原理与性能优化之企业级分享总结(内附完整ppt)

你可能不知道的「 CSS 容器查询」

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

meta 标签知多少

JavaScript基础学习--零碎

移动端避免使用100vh

将 SVG 与媒体查询结合使用

移动端避免使用100vh

浏览器原理学习笔记01—宏观视角下的浏览器

【Hello CSS】第三章-浏览器的视图与坐标

Puppeteer：从零出发，全面掌握浏览器自动化神器

HTMLCSSJS 是如何在浏览器中，渲染成你看到的页面？【图解Chrome】

我用飞桨做了一个菜品图像识别系统

图解浏览器

浏览器之性能指标-CLS

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐