iphone不让页面整体拖动

iPhone 禁止 Safari 页面上下拖动反弹

解决方法: <body ontouchmove="event.preventDefault()" > 手机端设置: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name

客户需求:禁止微信内的H5页面上下拖动: 解决方案: 网上的答案几乎都是阻止默认事件,即: document.body.addEventListener('touchmove' , function(e){ e.preventDefault(); }); 但是使用这个方法还存在一定的问题: bug1:有时生效有时失效: 原因:经过不间断的实践测试,发现有可能是网络加载的问题,在用户拖动页面的时候上面的功能代码还没加载出来,所以没有生效. 解决方法:监听页面资源加载,等页面内所有资源加载完毕后再将

ehcache 页面整体缓存和局部缓存

页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数据来源又是非常广泛的,大多数来自不同的对象,而且有可能来自不同的db ,所以给首页做缓存是很必要的.那么主页的缓存策略应该怎样设计呢?我认为应该是某个固定时间之内不变的,比如说2分钟更新一次.那么这个缓存应该做在什么地方呢?让我们来看一下,当前我们的的应用的结构一般是是page-filter-action-service-dao-db ,这个过程中的- 的地方都是可以做缓存的地方,根据页面缓存的特征,应该把页面缓

ehcache实现页面整体缓存和页面局部缓存

之前写过spring cache和ehcache的基本介绍和注解实现缓存管理,今天记录下web项目的页面缓存技术. 页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数据来源又是非常广泛的,大多数来自不同的对象,而且有可能来自不同的db ,所以给首页做缓存是很必要的.那么主页的缓存策略应该怎样设计呢?我认为应该是某个固定时间之内不变的,比如说2分钟更新一次.那么这个缓存应该做在什么地方呢?让我们来看一下,当前我们的的应用的结构一般是是page-filter-act

基于jQuery页面窗口拖动预览效果

今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览源码下载实现的代码. html代码: <p> minimap - A jQuery Plugin<br> A preview of full webpage or its DOM element with flexible

iphone在iframe页面的宽度不受父页面影响，避免撑开页面

工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会. <div style="width: 100%; height: 300px; overflow-x: hidden; overflow: scroll; -webkit-overflow-scrolling: touch;"> <iframe src="contract.

JS / jquery 实现页面面板拖动 QQ网页版登陆页面拖动

参考:慕课网DOM实践探秘 http://www.imooc.com/learn/138 实现需求:点击页面头部,可以拖动面板.使用js原生和jquery 各实现一次. 可以学到:1.鼠标在当前页面的位置. 2.事件处理程序,阻止冒泡, 3.面板位置的逻辑计算. 4.鼠标事件:onmousedown (鼠标点下) onmouseup (鼠标释放) onmousemove (鼠标移动) 课前须知:html css javascript jquery 实例:

ios兼容 input输入时弹出键盘框页面整体上移键盘框消失后在ios上页面不能回弹的问题

前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法:给input加blur事件,代码如下: $('input').on('blur', function () { setTimeout(function(){ var scrollHeight = document.documentElement.scrollTop || document.body.

让页面整体变灰css设置

上次看到某人去世了,百度就把相应介绍某人的信息页面全部灰掉,于是寻找到了种简单的方法,只需设置html html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg x

适应移动端 iPhone & Android 微信页面的一些css属性

1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) -webkit-tap-highlight-color:rgba(255,0,0,0.5); //利用此属性,设置touch时链接区域高亮为50%的透明红,只在iOS上起作用.Android上只要使用了此属性就表现为边框.在body上加此属性,这样

1.ehcache实现页面整体缓存和页面局部缓存

转自:https://www.cnblogs.com/jianjianyang/p/4933016.html 好长时间没写博客了,真的是没时间啊.ps:其实就是懒!!接下来几篇要写下缓存,这里主要写下ehcache与spring整合的内容,包括aop形式的缓存,基于注解的缓存,页面缓存这三方面吧.在这之前先要了解下spring cache 和ehcache!! 这篇博客http://haohaoxuexi.iteye.com/blog/2123030写的真的特别清楚了,我这里只是做下总结. 一.

关于苹果iPhone手机对页面margin属性无效的解决方法一（如有错误，请留言批评）

这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下安卓手机,打开正常 iphone6 p 打开出现的问题(无视margin-bottom:60px) 当然,在google浏览器移动端测试iphone6p,打开的也是没问题的(这说明什么问题呢?) 思索找寻了好久,也有反映margin不起作用的,改成padding就可以,但是改成padding在我这里是不可取的,因为footer如果给加了padding-bottom:60px属性,那

IPhone中H5页面用on绑定click无效的解决方法

首先声明本人资质尚浅,本文只用于个人总结.如有错误,欢迎指正.共同提高. ----------------------------------------------------------------------------------- 首先问一句? 为什么移动页面还在用click方法?假如必须用click,且遇到如标题所示bug,下文便是解决之道.当然,如果不用必须用click,则换成touch自然不存在本文的bug. 话不多说,当你懂得何时直接绑定click,何时用on绑定时候,理解下文

iscroll 子表左右滚动同时保持页面整体上下滚动

if ( this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) { //e.preventDefault(); } 注释掉e.preventDefault(); 原理: 不能阻止全局的移动事件

移动端的touch事件处理

简要的探讨一下移动端 touch 事件处理几个坑,以及相应的简单处理方法. click 穿透假设有个弹出层,上面有个关闭的按钮支持 touchend 触发后关闭,若正好下方有个元素支持 click 事件,在弹出层关闭后将会在下方元素触发 click 事件.这种效果肯定不是我们需要的,而且我们无法确定合适会在上方出现一个支持 touch 的弹出层,所以我认为最好的处理方式是禁用所有元素的 click 事件,相比 click 需要长达 1s 的触发时间,使用 touchend 可以获得更好的体验.

iPhone页面的常用调试方法

在iPhone中调试,大体上与上文安卓中的移动页面调试类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用. 本文基于此,简要介绍在iPhone中如何调试页面. 最终可以实现在Mac平台使用Safari(或结合ios_webkit_dubug_proxy使用Chrome)调试手机中Safari的页面,结合Charles进行抓包请求断点,再通过微信ipa包重签名来调试微信的WKWebView 在Windows中结合Fiddler与ios_webkit_debug_proxy中转实现Ch

移动端禁止页面拖动 h5禁止拖动页面

PC上css控制滚动仅css("overflow","hidden")已足够. 但是,如果在Mobile上还是可以拖动的!所以需要监听touchmove事件. 页面禁止拖动.滚动: $("html,body").css("overflow","hidden").css("height","100%"); document.body.addEventListener('

【原】移动web页面支持弹性滚动的3个方案

有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG. 上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 android

【转】移动web页面支持弹性滚动的3个方案

传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG. 上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 android2.2 以下不支持 position:fixed ios 和 android

移动web页面支持弹性滚动的3个方案

有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG. 上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 android

iphone不让页面整体拖动

热门专题