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. 《R语言实战》读书笔记 第七章--基本统计分析

    在导入数据并且将数据进行组织和初步可视化以后,需要对数据进行分布探索和两两关系分析等.主要内容有描述性统计分析.频数表和列联表.相关系数和协方差.t检验.非参数统计. 7.1描述性统计分析 7.1.1 ...

  2. getElementsByName

    name属性,name属性是input标签的内建属性,早期浏览器的getElementsByName方法是为了方便的获取用户的输入.由于name只是input的内建属性,其它标签没有,所以getEle ...

  3. 快速了解Android重要机制

    转自 http://www.jianshu.com/p/5f6d79323923 一.Android系统底层研究 关于底层的知识点不是在一篇文章中能讲解清楚,参见本人的Android底层研究系列,不断 ...

  4. linux缺页异常处理--内核空间【转】

    转自:http://blog.csdn.net/vanbreaker/article/details/7867720 版权声明:本文为博主原创文章,未经博主允许不得转载. 缺页异常被触发通常有两种情况 ...

  5. SQL Server中JOIN的用法

    JOIN 分为:内连接(INNER JOIN).外连接(OUTER JOIN).其中,外连接分为:左外连接(LEFT OUTER JOIN).右外连接(RIGHT OUTER JOIN).全外连接(F ...

  6. 关于js无法设置input的value的问题

    html内容来自: <script type="text/html" id="theTemplate"> <input id="in ...

  7. 使用overtrue/socialite实现第三方登陆

    composer下载包 将申请的配置内容放在.ENV文件中 在services.php文件中引用 控制器 其他第三方登陆同理,拿到client_id,client_secret 和redirect_u ...

  8. Codeforces Round #277.5 (Div. 2) B. BerSU Ball【贪心/双指针/每两个跳舞的人可以配对,并且他们两个的绝对值只差小于等于1,求最多匹配多少对】

    B. BerSU Ball time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  9. Codeforces Round #267 (Div. 2) B. Fedor and New Game【位运算/给你m+1个数让你判断所给数的二进制形式与第m+1个数不相同的位数是不是小于等于k,是的话就累计起来】

    After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...

  10. Python的扩展接口[1] -> 串口通信

    串口通信 / Serial Communication 1 串口简介 / Serial Introduction 串行接口(Serial Interface)简称串口,通常为COM接口,数据发送方式为 ...