禁止页面缩放

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  

在这个里面主要有这几个属性:

1.width - viewport的宽度

2.height - viewport的高度

3.initial-scale - 初始的缩放比例

4.minimum-scale - 允许用户缩放到的最小比例

5.maximum-scale - 允许用户缩放到的最大比例

6.user-scalable - 用户是否可以手动缩放
如果要禁止页面缩放,只要把user-scalable 设置成no 就可以

原文地址:https://www.cnblogs.com/nlyangtong/p/9907448.html

时间: 2024-08-01 09:15:26

禁止页面缩放的相关文章

禁止页面缩放功能

在手机浏览器浏览页面时,有时要禁止页面中的组件缩放,因为如果不阻止缩放的话,体验效果不好. 而实现禁止页面缩放,只需要在head里面加入下面一行即可. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 下面这行我也见过人用,但是效果不如上一行: <meta id="viewport

禁止Html5在手机上屏幕页面缩放

最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" /> 如果要禁止此情形,修改相应参数即可. <meta content="width=device-width, initial-scale=1.0, maximum-s

ios10中禁止用户缩放页面

在ios10前我们能通过设置meta来禁止用户缩放页面: [html] view plain copy<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 在ios10系统中meta设置失效了: 为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no

禁止浏览器缩放网页的HTML代码

禁止浏览器缩放网页的HTML代码 html5默认允许用户缩放页面,如果需要禁止缩放,我们需要将user-scalabel=0设置下,具体代码如下: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 注意:meta在head里.

html5中让页面缩放的4种方法

html5中让页面缩放的4种方法 2013-10-22 14:45:03 分类: Web开发 1.viewport这种方法,不是所有的浏览器都兼容 2.百分比这种方法,可以兼容大部分浏览器,但是修改幅度比较大.main .login .txt1{margin-top:8.59375%; position:relative;}3.css transform这种方法,可以兼容大部分浏览器,但是页面的位置是居中的.w320{transform: scale(1,1);-ms-transform: sc

webview支持页面缩放

1.webview支持页面缩放,普通经过以下设置就可满足80%的请求 //缩放开关 webView.getSettings().setSupportZoom(true); 设置此属性,仅支持双击缩放,不支持触摸缩放(在android4.0是这样,其他平台没试过) // 设置能否可缩放 webView.getSettings().setBuiltInZoomControls(true); 假如设置了此属性,那么webView.getSettings().setSupportZoom(true);也

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,

移动端(手机及平板)禁止用户缩放/拖动网页

禁止缩放 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> user-scalable=no|yes 设置用户缩放 禁止拖动 document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchm

禁止页面内按F5键进行刷新(扩展知识:禁止复制信息内容)

禁止页面内按F5键进行刷新: 1 //禁止页面内按F5键进行刷新 2 function f_DisableF5Refresh(event) { 3 var e = event || window.event; 4 var keyCode = e.keyCode || e.which; 5 if(keyCode == 116) { 6 if(e.preventDefault) { //非IE 7 e.preventDefault(); 8 } else { //IE 9 e.keyCode = 0