等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放

非响应式web网页，在小于web网页设置的宽度的分辨率电脑下显示，会出现滚动条滚动显示超出分辨率的内容，如：网页主体宽度为设置为width:1400px，那么在1280分辨率电脑的浏览器上访问，就会出现横向滚动条。

如果想完整显示，又不做成响应式结构，可以通过等比例缩放的形式让网页完整显示在1280分辨率电脑的浏览器上，等同于浏览器“Ctrl+鼠标滚动”的缩放效果。

代码也很简单，通过jquery的resize()方法和css的zoom属性即中。

实现代码

$(window).resize(function () {

var win = $(this).width();

if (win < 1493) { //宽度小于1493时，按1493和窗口实际宽度计算等比

$("body").css("zoom", win / 1493);

}else{

$("body").css("zoom", "normal");

}

}).trigger('resize');

代码说明

resize()方法

当调整浏览器窗口的大小时，发生 resize 事件或函数。

zoom属性

设置或检索对象的缩放比例，可使用浮点数或百分比来定义缩放比例

支持的浏览器：IE6+、Firefox > 18、Safari 5.1.7+、Chrome 13+、Opera > 12.5

等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放相关推荐

解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法参考文章: (1)解决element-ui中el-m ...
php图片如何让浮动,页面中用css属性怎么控制图片自定义浮动？（示例）
新手在设计web页面时,偶尔就图片浮动的问题会产生一些困扰,不知从何下手.本篇文章主要就给大家介绍css浮动的相关知识,希望对需要的朋友有所帮助.首先这里就需要大家了解一下css中的一个重要属性浮动f ...
漂亮大气的html导航页面,jquery+css打造位于网页顶部漂亮黄色下拉导航
jquery+css打造位于网页顶部漂亮黄色下拉导航 - www.webdm.cn $(document).ready(function(){ $(".btn-slide").cl ...
html网页滚轮滑动页面,JQuery实现鼠标滚轮滑动到页面节点
下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势 ...
php商品浏览页面,jquery仿京东商品放大浏览页面_实例分享
前面我们和大家分享过很多仿京东功能的文章,本文我们主要为大家详细介绍jquery仿京东商品浏览页面,鼠标放在图片上实现放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. j ...
CSS垂直翻转/水平翻转提高web页面资源重用性
一.CSS下兼容性的元素水平/垂直翻转实现随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...
一种开发软件的新思路，给Web页面穿个马甲，用web页面做软件UI，用C#（或者C++等其它语言）代码做功能...
喜欢就点一下"推荐",给我点写下去的动力,谢谢! 声明: 本文版权归作者碧血黄沙.NET所有,欢迎转载,但转载必须保留以下版权信息,且在文章页面明显位置给出原文连接,否则保留追究法 ...
python web页面输出_python+socket+jq实现web页面实时输出结果
例如有这样一个需求: 在终端上进行ping操作,现在想把这个这个操作放到web页面上进行,并且实现实时输出的效果. 来分析下具体实现过程第一步,传统的http请求实现这个有点不太友好,因为这里边是一 ...
java实现页面高效刷新_selenium高效应对Web页面元素刷新的实例讲解
当我们在页面上进行selenium.type()或者selenium.click()操作的时候,往往需要需要等待一个元素的出现,对于一般的网页,当我们进入一个新页面的时候,往往会使用selenium. ...

等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放

等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放相关推荐

最新文章

热门文章