iPad 上的chrome "切换到桌面网站" 导致的mouse over效果

背景1:做一个普通的网站,其中有一个效果是 当把光标(onmouseover效果)放到左边一些(多个)小图标上后,需要改变右边的文字内容,移开时恢复,点击这些小图标的时候,再改变右边这些内容(可以理解为移上去是预览,点击后才确定)。

背景2:如果是用手机或者pad之类的设备访问,那么自然就没有onmouseover效果,就没有预览,只有点击才会切换内容,但chrome有一个选项叫做“切换到桌面网站”,意思是说当选择后,当前页面会以电脑的模式来解析。

问题:如果选择了这个“切换到桌面网站”,那么onmouseover就会起作用,但怎么工作的呢?实际上卞是点击一下当成是onmouseover,再点击一下才是click,那么问题来了,那如何实现onmouseout呢?答案是:没有。那么问题又来了,当在pad上使用的时候,会自然的点击一下,就以为是点击了,不会点击两下,这听起来没什么问题,但如果:右边的内容中,有可点击的按钮(就是说这些右边的按钮是随着左边的图标的切换而改变的),这时候就有问题了:右边的按钮是不能点击的,或者说当点击的时候,会返回到之前的状态(前一个左边的图标所对应的右边的内容)。

解决:做判断,在手机或者pad上,去掉onmouseover效果,那问题又来了:就算用js等做了判断,如果是非电脑设备在访问,那么就不要onmouseonver效果,但这个chrome的“切换到桌面网站”,实际上是会被当成电脑来访问的,所以还是会有onmouseover效果。怎么办呢?我也没有找到办法,只能给个提示信息说:亲爱的客户,您需要点击”两次“图标才能成功切换右边的内容....

结语:这个问题是客户反馈过来的,他用一个ipad装了一个chrome发现了这个问题(话说我不知道为什么他要在ipad上装chrome,是因为不喜欢safari吗...),真心不懂

时间: 2024-11-08 11:54:56

iPad 上的chrome "切换到桌面网站" 导致的mouse over效果的相关文章

XP系统下Chrome浏览器打开某些网站闪退的解决办法

这个星期用Chrome浏览网站的过程中,突然出现没有什么提示的闪退现象.一开始没怎么注意,以为只是偶然现象,但当重启Chrome后点恢复按钮再次闪退,这就可以肯定是因为打开某些网站造成.于是再次重启Chrome浏览器并按下恢复按钮,在可能导致Chrome闪退那个网站打开之前关闭那个分页,这样Chrome就不闪退了.这个办法只能治标不能治本,下次再打开这个网站同样会出现闪退的现象. 为了彻底解决这个问题,于是就用搜索引擎找找看有没有解决办法.首先用"Chrome打开某些网站闪退"作为关键

[转] 在安卓设备上使用 Chrome 远程调试功能

你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原生安卓应用中调试网页内容. 将屏幕从你的安卓设备上投影到你的开发机器上. 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器. 需求 要开始远程调试,你需要: 安装 Chrome 32 或者之后的版本. 连接安卓设备用的 USB 线缆. 对于通过浏览器调试:安卓 4.0 以上并且安装了 Ch

iPad上的Cookie到底有多长?

[故事背景]: 公司某个站点,特别依赖Cookie的使用,而且用的比较狠.在设计之初想当然地以为到达Cookie上限是猴年马月的事儿,没想到时过境迁,这个上限真的来了. 着手改吧,也不想投入太多.于是下面的思路就涌上心头: [问题] 目前遇到的瓶颈主要是单个Cookie的尺寸超大,在IE下,没有问题,在Firefox下和Chrome下均出现单个Cookie过大,以至于被丢弃的现象. [思路] 因此为了不侵入旧代码,打算在站点前加一个HttpModule来切分和拼装Cookie.为了保证一次成型,

如何在ipad上玩转思维导图软件

在iPad 上如何选择思维导图工具?评价一款应用APP是否好用,除了软件自身的功能,很大程度上也取决于用户的体验度.按照东尼博赞的理论,手写的思维导图更有益于人的记忆,但是在实际工作.生活中,对于思维整理来说,一款好的思维导图工具可以让你更高效的学习和完成工作任务. 在iPad上画思维导图用哪款思维导图工具?不妨试试国产的MindMaster思维导图. 推荐MindMaster的几个理由:简洁大方的界面如你所见,MindMaster iPad 版和Mac电脑端一样拥有简洁的操作界面,既能保证功能

iPad上用Codea-SCM调用git web services做版本管理

iPad上用Codea-SCM调用git web services做版本管理 目录 说明 安装 Codea-SCM 远端代码仓库设置 本地 Codea-SCM 设置 说明 在 iPad 上使用 Codea 做项目开发,虽然调试.修改代码很方便,但是有一点比较麻烦,就是 Codea 无法做版本管理,所以有时修改错了,想回退到之前的稳定版本,就没办法了,只能手动保存每个版本的代码. 现在有一种方法可以把 Codea 的项目自动提交到 git 服务器上,可以非常方便地管理你的不同版本. 安装 Code

iPad上绘画创作利器Paper53

Paper 53在很早之前我们就为大家推荐过,上周这款App也迎来了首次无内购免费促销,目前所有的笔刷都可以免费使用,如果你有在iPad上绘画的需求,那么Paper 53绝对是你的最佳选择,如果你想更深度的体验Paper 53,买一根Pencil 53蓝牙触控笔也是值得的. 每日佳软:iPad上绘画创作利器Paper53 Paper53 Paper 53的界面设计十分漂亮,有笔记本收集癖的用户肯定会喜欢默认的笔记封面.Paper by 53 提供的绘图工具从左到右依次是:橡皮.钢笔.铅笔.马克笔

Chrome中显示桌面通知

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <html> <head>     <title>Google 桌面通知</title> </head> <body>     <button id="btn">         显示桌面通知</button>

新浪SAE上搭建WordPress个人博客网站-开篇

新浪SAE上搭建WordPress个人博客网站-开篇 2014年5月29日 在开始这篇博客之前,笔者在这里先普及两个东西: SAE,Sina App Engine的简称,是新浪的内部开发的云计算平台,在这里开发者可以创建Web应用和移动应用.我们创建好的应用就可以部署到SAE服务器上,它会帮我们进行负载均衡,SAE提供很多功能和服务,详细内容请到http://sae.sina.com.cn/进行查看. WordPress想必很多个人站长都非常熟悉了,它是一种使用PHP语言和MySQL数据库开发的

Q12:app在iPhone上运行正常,iPad上出现黑边问题解决方案

Q12:app在iPhone上运行正常,iPad上出现黑边问题解决方案 问题描述: app 在iPhone上运行正常,在iPad上出现黑边. 问题原因: 首先选中你的项目,右侧出现我们熟悉的General.Capabilities.Info等等.现在检查General->Deployment Info的Deployment Target 以及 Devices,一要保证ios系统版本配套,二要保证设备选中通用,有些朋友由于前个项目是设置了iPhone,第二次建项目时一时大意没有设置回来,那可就糟糕