[PWA] Disable Text Selection and Touch Callouts in a PWA on iOS
Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're going for a more "native" feel.
We'll first disable the ability to select text in our app by setting the css user-select options to none.
Then, we'll disable the iOS long-press "callout" menu by setting -webkit-touch-callout to none.
App.css
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
[PWA] Disable Text Selection and Touch Callouts in a PWA on iOS的更多相关文章
- Text selection in div(contenteditable) when double click
背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了 ...
- 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类
2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...
- threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...
- jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
- JQuery分页插件bs_pagination的应用
一.引入bs_pagination的js文件以及样式文件(项目中需要引用Jquery和bootstrap的相关js和样式文件,且在以下引用之前): <link href="~/Scri ...
- Jquery 右键菜单(ContextMenu)插件使用记录
目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...
- 浏览器Range,Selection等选中文本对象
Range对象 Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. 最常见的Range是用户文本选择范围(user text selection).当用户选择了页面上的 ...
- sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- zTouch-移动端触屏开发利器(zepto touch扩展)
* Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版 ...
随机推荐
- 笔记:CS231n+assignment2(作业二)(三)
终于来到了最终的大BOSS,卷积神经网络~ 这里我想还是主要关注代码的实现,具体的CNN的知识点想以后在好好写一写,CNN的代码关键就是要加上卷积层和池话层. 一.卷积层 卷积层的前向传播还是比较容易 ...
- 《c程序设计语言》读书笔记-删除字符串中匹配的字符
#include <stdio.h> #include <string.h> #define Num 10 int main() { int c,i,j = 0,m,n = 0 ...
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring中报"Could not resolve placeholder"的解决方案(引入多个properties文件)
除去properites文件路径错误.拼写错误外,出现"Could not resolve placeholder"很有可能是使用了多个PropertyPlaceholderCon ...
- windows实时监测热插拔设备的变化2
//动态监测设备插拔 #include <Dbt.h> BEGIN_MESSAGE_MAP(ParticipateMeeting, CDialogEx) ON_WM_DEVICECHANG ...
- UVA 11125 Arrange Some Marbles
dp[i][j][m][n][s]表示最初选择j个i号颜色大理石.当前选择n个m号颜色大理石.剩余大理石状态(8进制数状压表示)最开始没看出状压..sad #include <map> # ...
- [MySQL] 参数: innodb_flush_log_at_trx_commit和sync_binlog
MySQL参数: innodb_flush_log_at_trx_commit和sync_binlog innodb_flush_log_at_trx_commit和sync_binlog是MySQL ...
- ECMAScript和JavaScript的关系
JavaScript 是一种基于 ECMAScript 规范的脚本语言,并在此基础上进行了自己的封装.ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任何基 ...
- 如何将离线的PIP安装包快速安装好
先将已安装的组件通过pip freeze require.txt导出. 将require里需要的安装包放到一个独立目录下. 然后运行命令: pip install --no-index --find- ...
- jquery mloading
在执行jQuery的ajax时,有的时候请求回来会有较长时间,这个时候,如果什么都没有显示,用户会觉得网站卡住了,所以这个时候,来个mloading会使用户体验更好些. 使用方法很简单 将jquery ...