手机浏览器wap网页点击链接触发颜色区块的问题解决办法

引子

在做HTML5 WAP网页的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观。需求针对这种情况来问我,能否把这个一闪颜色去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢?

研究

通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)。

下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个

-webkit-tap-highlight-color:rgba(0,0,0,0)

的含义就是颜色是黑色,透明度是0,看不到了。所以点击就没有效果了。

-webkit-tap-highlight-color是什么?

注释:

-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

语法:

-webkit-tap-highlight-color:color

默认值: inherit

适用于:链接元素比如新窗口打开,img元素比如保存图像等等

兼容性:

iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的,只是显示效果有所不同。

原文地址http://www.luoxiao123.cn/1487-2.html

时间: 2024-10-12 21:35:51

手机浏览器wap网页点击链接触发颜色区块的问题解决办法的相关文章

手机网站点击链接触发颜色块的问题解决

引子 前段时间做微信页面的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观.需求针对这种情况来问我,能否把这个一闪的颜色去掉.我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢? 研究 通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0). 下面解释一下什么是RG

详谈Gdtool如何通过代码实现微信h5页面跳转浏览器 在微信中点击链接直接跳转到手机默认浏览器

前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面临一个非常严重的问题,那就是用户体验差,用户量无法有效地累积起来,从而导致推广成本一直在增加,推广效率却无法有明显的提升. 所以针对这个问题,特写这篇文章来分享如何正常从微信内访问已经被拦截的链接,或者说如何有效地防止链接被微信拦截.此方法适用于安卓和苹果,且不需要安装任何软件和插件. ? 简单的处

详谈ccjump如何通过代码实现微信h5页面跳转浏览器 在微信中点击链接直接跳转到手机默认浏览器

前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面临一个非常严重的问题,那就是用户体验差,用户量无法有效地累积起来,从而导致推广成本一直在增加,推广效率却无法有明显的提升. 所以针对这个问题,特写这篇文章来分享如何正常从微信内访问已经被拦截的链接,或者说如何有效地防止链接被微信拦截.此方法适用于安卓和苹果,且不需要安装任何软件和插件. 简单的处理方

基于图像识别测试手机浏览器打开网页首屏时间的方法

本文涉及性能测试技术,特别是涉及一种基于图像识别的测试手机网页首屏时间的方法,它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中.同时可以应用到其他android的apk的响应时间的测试中去 随着智能手机等移动终端的发展,越来越多的用户开始通过手机等设备浏览网页,以获取用户所需的信息. 用户使用手机访问网站是基于手机浏览器所获取的网页实现的.通常情况下,用户访问网站的页面全部加载完毕时,总页面高度可能有一屏到多屏不等,总的页面加载时间要比首屏加载时间长很多,但是首屏加载时间是用户对

Mindjump-微信跳转浏览器功能源码,实现微信内自动跳转手机浏览器访问网页url

源码使用场景:1.用来实现微信自动跳转外部浏览器下载app2.用来实现微信内打开网页链接自动跳转浏览器访问指定页面3.防止网页链接由于被微信拦截,导致用户无法正常在微信内打开 源码说明: 适用安卓和苹果系统,支持任何网页链接.并且无论链接是否已经被微信拦截,均可实现微信内自动跳转浏览器打开. 生成的跳转链接具有极佳的防拦截效果. 源码体验: 1.复制分享链接(app下载页链接或网页链接),然后在浏览器(电脑和手机上都可以)中打开我们需要用到的 Mindjump 平台:http://www.min

解决移动端点击链接出现颜色块问题

移动端在点击链接跳转的时候会出现一个颜色块,看起来会闪一下,影响了用户体验.解决方法 就是添加一个css样式,改变其颜色,如下: -webkit-tap-highlight-color: rgba(0,0,0,0);

微信h5网页点击链接跳转到默认浏览器是怎么弄得

本经验是在微信中,用户点击支付直接跳转到浏览器中进行WAP支付,或者用扫码的形式变种成H5支付(因为支付宝的扫码付自身就带H5支付,可以通过截取代码演变).下面就具体说一下操作方法把.  用户在微信中操作支付,比如A页面用户点击了支付,此时跳转到B页面,将相关参数携带给B页面(最好将相关参数进行BASE64等加密),B页面判断如果是在微信的环境中给出以下头部   header("Content-type:application/pdf");   header("Content

电脑连接并调试手机浏览器的网页

直接在浏览器上 用浏览器的手机模式 模拟手机环境有时候不是太准确,所以想办法 实现在手机上能连接,并调试手机正在访问的网页,文本给出了解决方法(没有苹果手机,所以只做了安卓的) 下图就是电脑上连接好的效果: 需要做一下步骤 一, 手机端的准备: 1.usb数据线,第一次连接电脑跟手机 可能还需要装驱动: 2.打开开发者模式,打开选择USB配置,设置成USB连接(一定注意),具体手机连接可以不太一样 ,但是都需要设置成usb连接方式 3,下载手机版谷歌浏览器,调试的时候 用的是谷歌浏览器 二,电脑

关于网页点击链接后游览器如何生成页面的过程

分为4个步骤: 1. 当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询.这能使浏览器获得请求对应的 IP 地址. 2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接.该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递.该握手首先由客户端尝试建立起通信,而后服务器