移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可。
但是pc端确实比较麻烦，用户可以通过如下几种方式来缩放：
//具体实现demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>浏览器网页内容的百分比缩放（按Ctrl和+号键或者-号键的缩放）</title>
<style type="text/css">
</style>
</head>
<body>
<a href="javascript:" id="openApp">知乎客户端</a>
<input type="text" name="ee" autocomplete="on">
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// 判断pc浏览器是否缩放，若返回100则为默认无缩放，如果大于100则是放大，否则缩小
function detectZoom (){
var ratio = 0,screen = window.screen,
ua = navigator.userAgent.toLowerCase()
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI &&screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI}}
else if (window.outerWidth !== undefined &&window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth}
if (ratio){
ratio = Math.round(ratio * 100)}
return ratio
}
//window.onresize 事件可用于检测页面是否触发了放大或缩小。
$(function(){//alert(detectZoom())
})
$(window).on('resize',function(){ isScale()})
//判断PC端浏览器缩放比例不是100%时的情况
function isScale(){
var rate = detectZoom()if(rate != 100){
//如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用，又无法自动条用键盘事件，目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
console.log(1)
alert('当前页面不是100%显示，请按键盘ctrl+0恢复100%显示标准，以防页面显示错乱！')
}}//阻止pc端浏览器缩放js代码
//由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况，只能通过js来控制了
// jqeury version
$(document).ready(function () {
// chrome 浏览器直接加上下面这个样式就行了，但是ff不识别
$('body').css('zoom', 'reset')$(document).keydown(function (event) {
//event.metaKey mac的command键if ((event.ctrlKey === true || event.metaKey === true)&&(event.which === 61 || event.which === 107 ||
event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){
event.preventDefault() }})
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault() } })})</script>
扩展资料：width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
如果要禁止页面缩放，只要把user-scalable 设置成no 就可以
html5默认允许用户缩放页面，如果需要禁止缩放，我们需要将user-scalabel=0设置下，具体代码如下：<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
注意:meta在head里。
initial-scale初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。
例：
(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）