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的更多相关文章

  1. Text selection in div(contenteditable) when double click

    背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了 ...

  2. 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类

    2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...

  3. threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

    最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...

  4. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  5. JQuery分页插件bs_pagination的应用

    一.引入bs_pagination的js文件以及样式文件(项目中需要引用Jquery和bootstrap的相关js和样式文件,且在以下引用之前): <link href="~/Scri ...

  6. Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...

  7. 浏览器Range,Selection等选中文本对象

    Range对象 Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. 最常见的Range是用户文本选择范围(user text selection).当用户选择了页面上的 ...

  8. sencha Touch 2.4 学习之 XTemplate模板

    XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  9. zTouch-移动端触屏开发利器(zepto touch扩展)

    * Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版 ...

随机推荐

  1. POJ3680:Intervals(离散化+最大流最小费用)

    Intervals Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 9320   Accepted: 4014 题目链接:ht ...

  2. Welcome to Workrave

    Welcome to Workrave Workrave is a free program that assists in the recovery and prevention of Repeti ...

  3. Vue props父组件向子组件传值详解

    vue官网上可以说有我们想要的一切,先贴上通过prop传值的官网地址:通过prop向子组件传递数据 Prop是什么? Prop是你可以在组件上注册的一些自定义特性.当一个值传递给一个prop特性的时候 ...

  4. elemetUi 组件--el-checkbox

    [需求]实现选择右边的

  5. 理解S12(X)架构中的地址映射方案

    目录 1. 介绍 2. CPU 本地地址 3. 分页窗口 4. 内存页 5. 控制各个对象在内存中放置的位置 介绍 在一个S12或S12X架构中,很有必要分清楚两种类型的内存地址:banked和non ...

  6. JAVA下几个问题

    一.Server MyEclipse Tomcat v8.5 was unable to start within 45 seconds. If the server requires more ti ...

  7. Winform 模拟Session

    背景 在Web中Session的功能很好用,于是想Winform中实现该功能,典型应用场景则是登陆成功后,当一段时间不操作,则该会话过期,提示重新登陆. 资源下载 测试代码 示例说明:登陆进去10s不 ...

  8. 调试钩取技术 - 记事本WriteFile() API钩取

    @author: dlive 0x01 简介 本章将讲解前面介绍过的调试钩取技术,钩取记事本的kernel32!WriteFile() API 调试钩取技术能进行与用户更具有交互性(interacti ...

  9. linux内存管理2:内存映射和需求分页(英文名字:demand Paging,又叫:缺页中断)【转】

    转自:http://blog.csdn.net/zhangxinrun/article/details/5873148 当某个程序映象开始运行时,可执行映象必须装入进程的虚拟地址空间.如果该程序用到了 ...

  10. mininet命令

    官方文档:http://mininet.org/walkthrough/ 翻译的官方文档:https://segmentfault.com/a/1190000000669218 ovs-ofctl相关 ...