禁止页面缩放提示，ie浏览器提示

最新推荐文章于 2024-03-13 11:09:36 发布
最新推荐文章于 2024-03-13 11:09:36 发布
阅读量727 收藏
点赞数
分类专栏： 原创 文章标签： html css js ie 网页缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15238979/article/details/106120056
版权

使用了新技术总会有兼容性问题，一般公司不考虑兼容性问题，但是还是出现诸如样式错乱、无法支持ie、缩放浏览器或屏幕设置比率非100%下的网页错位，作为开发者需要给出友好的提示，提高用户体验。

演示地址：https://sywsywsyw.github.io/noie-nozoom/

源码：https://github.com/sywsywsyw/noie-nozoom

兼容ie8、不支持以下版本
对象最后一个属性后不要加多余的逗号，IE低版本会报错
兼容ie需要再服务器环境下打开 （可以使用http-server,live-server热更新服务）
因为缩放之后所有内容也会缩放，所以需要把样式改为图片然后同步缩放图片
缩放图片规则为：最初尺寸除以当前比例 例如放大0.2倍就是 477/1.02

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>不许ie,不许缩放</title>
	<style>
		.suiiewrap {
    
			/* position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: none;
			z-index: 99999; */
		}

		.suiiebg {
    
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: .5;
			background: #000;
		}

		.suiiemain {
    
			position: fixed;
			width: 480px;
			min-height: 360px;
			padding-bottom: 20px;
			top: 50%;
			left: 50%;
			margin-left: -240px;
			margin-top: -220px;
			background: #fff;
			overflow: hidden;
			text-align: center;
			z-index: 99999;
		}

		.spmhead {
    
			width: 100%;
			height: 50px;
			background: #4878bd;
			color: #fff;
			position: relative;
		}

		.spmhclose {
    
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
		}

		.spmhcloseimg {
    
			width: 25px;
			height: 25px;
			margin: 12.5px;
		}

		.spmcontent {
    
			padding: 0 10%;
			text-align: center;
		}

		.spmctitle {
    
			text-align: center;
			font-weight: bold;
			margin-bottom: 8px;
			font-size: 18px;
		}

		.spmctitledesc {
    
			text-align: center;
			font-weight: bold;
			font-size: 16px;
		}

		.spmctips {
    
			color: #8c8c8c;
			font-size: 14px;
			text-align: justify;
			padding: 10px 0;
		}

		.spmctsp {
    
			margin: 0;
			padding: 0;
			margin-bottom: 10px;
		}

		.spmctsblue {
    
			color: #4878bd;
			margin: 0 6px;
		}

		.spmcimg {
    
			width: 40%;
			margin: 20px;
		}

		.spmfnotips {
    
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin: 0 auto;
			background: #4878bd;
			font-size: 16px;
			color: #fff;
			cursor: pointer;
		}


		/* 缩放 */
		.suizoomwrap {
    
			/* position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: none;
			z-index: 99999; */
		}

		.suizoombg {
    
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: .5;
			background: #000;
		}

		.suizoomcontent {
    
			position: fixed;
			width: 477px;
			height: 412px;
			top: 50%;
			left: 50%;
			margin-left: -237px;
			margin-top: -206px;
			background: #fff;
			border-radius: 0;
			overflow: hidden;
			text-align: center;
			z-index: 99999;
			box-shadow: 0px 0px 13px 0px rgba(6, 193, 174, 0.15);
			/* box-shadow: 1px 8px 25px 0px rgba(65, 115, 178, 0.1); */
		}

		.szcimg {
    
			width: 100%;
			height: 100%;
		}

		.szcclose {
    
			width: 10.5%;
			height: 12%;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			background: #000;
			opacity: 0;
		}

		.szctips {
    
			width: 42%;
			height: 9.8%;
			text-align: center;
			margin: 0 auto;
			background: #4878bd;
			font-size: 16px;
			color: #fff;
			cursor: pointer;
			position: absolute;
			left: 29%;
			bottom: 4.4%;
			background: #000;
			opacity: 0;
		}
	</style>
</head>

<body>
	<!-- ie 提示 -->
	<div class="suiiewrap">
		<!-- <div class="suiiebg"></div> -->
		<div class="suiiemain">
			<div class="spmhead">
				<div class="spmhtitle"></div>
				<div class="spmhclose">
					<img src="./close.png" alt="关闭" class="spmhcloseimg">
				</div>
			</div>
			<div class="spmcontent">
				<img src="./warn.png" alt="警告图片" class="spmcimg">
				<div class="spmctitle">暂不支持IE类型浏览器</div>
				<div class="spmctips">
					<p class="spmctsp">1. IE浏览器下会出现样式错位等现象</p>
最低0.47元/天 解锁文章
孙小笔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C# 设置IE浏览器的外观
11-07
总的来说，通过C#的WebBrowser控件，我们可以实现对IE浏览器的外观和行为的广泛定制，包括但不限于页面加载、导航控制、外观样式、交互功能等。尽管.NET Framework的WebBrowser控件基于较旧的IE引擎，但它仍然提供了...
阻止浏览器屏幕缩放
花铛
06-11 3410
window.onresize 是给window的onresize属性绑定事件，只能有一个，也就是说后面的会覆盖前面。 //当浏览器窗口大小发生改变时，控制台只会打印 2。 window.onresize = function(){ console.log("1") } window.onresize = function(){ console.log("2") } jQuer...
js浏览器缩放提示
weixin_30871701的博客
02-25 495
　　data() { return { instance: null, isZoomOpen: false }; }, 　　mounted() { const that = this; this.isZoom(); window.ad...
禁止web页面缩放解决方案
hudabao888666的博客
03-14 752
禁止web页面缩放解决方案
禁止ctrl+鼠标滚动缩放页面
lth002的博客
01-08 408
【代码】禁止ctrl+鼠标滚动缩放页面。
前端开发禁止用户缩放页面
别人笑我太疯癫，我笑他人看不穿。
11-07 2604
禁止用户缩放页面分两种情况。
300个注册表优化修改文件
11-20
禁止IE浏览器的脚本调试程序.reg 禁止IE浏览器的升级检查.reg 禁止IE显示图片.reg 禁止IE自动安装组件.reg 禁止Outlook Express用户打开可能包含病毒的附件.reg 禁止打开或保存带病毒的Outlook邮件.reg 去掉IE...
程序天下:JavaScript实例自学手册
07-08
1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机...
精易模块[源码] V5.15
03-21
9、新增“窗口_限制尺寸”，限制窗口缩放最小尺寸与最大尺寸，超出则无法缩放。采纳易友【@kisl7979】建议。 10、新增“窗口_取消尺寸限制”，取消窗口尺寸限制。 效验MD5：51A332F5AB071957FEF39209FD240CB6 精易...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机...
Visual C++编程技巧精选500例.pdf
09-01
054 如何获取IE浏览器标题内容? 055 如何取消标题栏的右键系统菜单? 056 如何在标题栏右键菜单中增加菜单项? 057 如何动态增加菜单? 058 如何动态删除菜单? 059 如何启用和禁用菜单命令? 060 如何为菜单添加复选标记...
易语言模块大全（共775个模块）
03-22
设置IE代理服务器(1.0).zip 世恒通用安装系统文件压缩模块(1.0).zip simixp(1.0).zip simixp1.0(1.0).zip simixp1.01(1.0).zip Sqlite数据库加强(1.0).zip Sqlite表管理(1.0).zip SQL基本语句(1.0).zip SQL数据库...
易语言700模块打包
04-19
对话框编辑器(1.0).zip 度量制式转换(1.0).zip 打印模块V1.0(1.0).zip 打印预览1.1(1.1).zip 打印预览1.3(1.3).zip 打印预览1.33(1.33).zip 打印预览2.41(2.41).zip 打印预览2.42(2.42).zip 打印预览2.44...
禁止浏览器对页面进行缩放
艾丽的博客
05-14 5853
手机端： 只需要在标签中里面加上 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 即可！ PC端用户可以通过如下几种方式来缩放： ctrl + +/- ctrl + 滚轮 浏览器菜单栏 由于浏览器菜单栏属于系统软件权限，没办法控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况 PC端需要通过js来进行控制，代码如
前端开发 PC Web端如何禁止用户缩放页面
最新发布
qq_36722315的博客
03-13 754
开发的页面不想让用户缩放页面，这样的页面可能涉及很多绝对相对定位。把这段代码贴在你页面加载完成的生命周期里，等待着奇迹发生吧。前两者可以监测到，那就能禁止。页面缩放一般三种方式。
PC及移动端禁止用户缩放页面的实现方式
ajdhakj6的博客
10-23 1297
PC及移动端禁止用户缩放页面的实现方式
移动端页面禁止放大缩小
Julia_0502的博客
08-19 460
安卓： 在index.html文件中添加meta标签： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0"> IOS： 在 src / app.vue 中 script 标签内添加代码： <script> window.onload = funct
ifarme中禁止页面缩放
06-09
可以通过以下两种方式禁止页面缩放： 1.使用CSS样式： 在嵌套的页面中，可以使用以下CSS样式禁止缩放： ``` , initial-scale=1, maximum-scale=1, user-scalable=no"> ``` 2.使用JavaScript： 在嵌套的页面中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值