禁止手机网页上下拖动怎么禁止缩放和拖动

WP7 如何禁用WebBrowser 控件缩放和左右移动
来源:博客园
我认为有两种方法可以实现。 1, WebBrowser 是基于IE 9的,所以WebBrowser 也是支持最新的HTML5标准。然而在HTML中有许多控件是通过Browser的 pan 和zoom等手持行为起作用的,您可以设置HTML中的 viewport metadata 元素来实现。如:将下面的HTML代码加入到您的HTML文件头上。
2, WebBroswer控件的组成是一棵树型结构如下图: \-WebBrowser \-Border \-Border \- PanZoomContainer \-Grid \-Border (*) \-ContentPresenter \-TileHost 其中 TileHost 就是原始的IE9组件,TileHost 不处理所有的manipulation相关的事件,而是由PanZoomContainer来处理,将这些事件转换成手持,然后将结果传输到TileHost。 换句话说我们可以中断相关的manipulationg事件传输到PanZoomContainer。当这些事件还未bubble up到PanZoomContainer时,当这些事件设置为已经处理过。 这个方法的关键步骤有2步: 1, 需要从WebBroswer组件树中找到Border控件。请参考: http://www.scottlogic.co.uk/blog/colin/2010/03/linq-to-visual-tree/ 2, 处理manipulation相关的事件,并设置该事件已经处理过 e.Handled =。 例如: using LinqToVisualT public class WebBrowserHelper { public
WebBrowser _ ///
/// Gets or sets whether to suppress the scrolling of /// the WebB ///
public bool ScrollDisabled { } public WebBrowserHelper(WebBrowser browser) { _browser = browser.Loaded += new RoutedEventHandler(browser_Loaded); } private void browser_Loaded(object sender, RoutedEventArgs e) { var border = _browser.Descendants().Last() as B border.ManipulationDelta += Border_ManipulationD border.ManipulationCompleted += Border_ManipulationC } private void Border_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e) { // suppress zoom if (e.FinalVelocities.ExpansionVelocity.X != 0.0 || e.FinalVelocities.ExpansionVelocity.Y != 0.0) e.Handled = } private void Border_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { // suppress zoom if (e.DeltaManipulation.Scale.X != 0.0 || e.DeltaManipulation.Scale.Y != 0.0) e.Handled = // optionally suppress scrolling if (ScrollDisabled) { if (e.DeltaManipulation.Translation.X != 0.0 || e.DeltaManipulation.Translation.Y != 0.0) e.Handled = } } }
免责声明:本站部分内容、图片、文字、视频等来自于互联网,仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益,请向本站发送有效通知,我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询,奖学金返现,名师点评,等你来互动阻止移动设备(手机、pad)浏览器双击放大网页的方法
作者:佚名
字体:[ ] 来源:互联网 时间:06-03 09:56:29
这篇文章主要介绍了阻止移动设备(手机、pad)浏览器双击放大网页的方法,需要的朋友可以参考下
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?
在Mobile页面上有提供viewport这个meta,可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明,移动设备要用下面这个声明。代码如下:&!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。代码如下:&meta name="viewport" content="user-scalable=0" /&但是为了更好的兼容,我们会使用完整的viewport设置。
代码如下:&meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /&
如果需要更详细的关于viewport的资料可以参考MDN
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
貌似DTD只声明成HTML5就可以了,下面加上viewport的标签
大家感兴趣的内容
12345678910
最近更新的内容如何禁止移动浏览器 输入框focus(输入)状态 网页自动被放大
[问题点数:100分,结帖人u]
如何禁止移动浏览器 输入框focus(输入)状态 网页自动被放大
[问题点数:100分,结帖人u]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。2555人阅读
HTML5(17)
众所周知,设计响应式页面的时候,经常会碰到某些浏览器他会缩小整个页面的大小来防止出现页面被截取的情况,
我们需要通过放大才能看到其中的内容。这是移动浏览器自动调整页面的功能。
这样就完全达不到响应式的要求。
那么问题来了,如何阻止浏览器自动调整页面大小呢。
有时候看别人写好的响应式代码的时候,系不系经常会看到head标签中经常会出现如下代码
&meta name=&viewport& content=&initial-scale=2.0,width=device-width&/&&meta&标签,name=&viewport&不言而喻,指的是对视口进行调控,content=&initial-scale=2.0& 的意思是将页面放大两倍(同理,0.5表示缩小一半,3.0表示放大3倍),
同时,width=device-width告诉浏览器页面的宽度应该等于设备宽度。
&meta&标签还可以控制页面可缩放的范围。下面的代码允许用户将页面最多放大至设备宽度的3倍,最小压缩至设别的一半。
&meta name=&viewport& content=&maximum-scale=3.0,minimum-scale=&0.5&,width=device-width&/&当然,也可以禁止缩放,
&meta name=&viewport& content=&initial-scale=1.0,user-scalable=no&/&
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:188054次
积分:2959
积分:2959
排名:第8490名
原创:91篇
转载:25篇
评论:101条
(2)(2)(2)(1)(4)(1)(1)(3)(2)(1)(3)(1)(11)(5)(20)(15)(11)(8)(5)(2)(3)(1)(2)(2)(1)(2)(5)(2)阻止移动设备(手机、pad)浏览器双击放大网页的方法_html5教程技巧
阻止移动设备(手机、pad)浏览器双击放大网页的方法_html5教程技巧HTML5中文学习网,是中国最大的HTML5中文门户,为广大HTML5爱好者提供各种HTML5资料,包括HTML5
点评:这篇文章主要介绍了阻止移动设备(手机、pad)浏览器双击放大网页的方法,需要的朋友可以参考下现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?在Mobile页面上有提供viewport这个meta,可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明,移动设备要用下面这个声明。复制代码代码如下:&!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。复制代码代码如下:&meta content="user-scalable=0" /&但是为了更好的兼容,我们会使用完整的viewport设置。复制代码代码如下:&meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /&如果需要更详细的关于viewport的资料可以参考MDNhttps://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag貌似DTD只声明成HTML5就可以了,下面加上viewport的标签
你最喜欢的

我要回帖

更多关于 手机网页禁止左右拖动 的文章

 

随机推荐