div按照屏幕尺寸(设备大小)进行缩放
2024-10-21 14:33:52
原理:利用css3 transform 属性
代码:
body{
width: 810px;
height: 340px;
margin: 0px;
padding: 0px;
background-color: #2e2423;
display: none; /**先隐藏,缩放后再显示,防止闪烁**/
}
<!-- 脚本 -->
<script src="${rc.contextPath}/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript"> //缩放视图
$(document).ready(function(){
resizeDiv();
}); var resizeDiv = function(){
var width = $(window).width();
var height = $(window).height();
var scaleX = width/810; //设备默认宽度为810px
var scaleY = height/340; //设备默认高度为340px //按设备比例缩放div的比例
var scaleFunc = "scale("+scaleX+","+scaleY+")"; $('body').css({
"transform":scaleFunc, //缩放比例
"transform-origin":"left top", //缩放基点 "-ms-transform":scaleFunc, /* IE 9 */
"-ms-transform-origin":"left top", "-moz-transform":scaleFunc, /* Firefox */
"-moz-transform-origin":"left top", "-webkit-transform":scaleFunc, /* Safari 和 Chrome */
"-webkit-transform-origin":"left top", "-o-transform":scaleFunc, /* Opera */
"-o-transform-origin":"left top",
}); $('body').show();
};
</script>
最新文章
- redis该如何分区-译文(原创)
- 2016年2月16日开始,每天一篇,记录学习心得,【基本技能篇】>;>;开篇《如何阅读一本书——心得》
- 拼图 canvas分割 dom拖拽 pc 移动端
- ASP.NET中常用的几个李天平开源公共类LTP.Common,Maticsoft.DBUtility,LtpPageControl (转)
- D3.js 理解 Update、Enter、Exit
- Oracle一些常用的查询命令总结(持续更新)
- 【剑指offer 面试题21】包含min函数的栈
- Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
- cocos2d 中加入显示文字的三种方式(CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas)
- 一种Webconfig自动化升级方法
- Natural Hazards 隐私政策
- [maven学习笔记]第一节,认识maven,搭建maven开发环境,写第一个HelloWorld
- spring拦截器(interceptor)简介
- ASP.NET页面之间传值的方式之Application(个人整理)
- 使用canvas实现一个圆球的触壁反弹
- vue.js如何实现点击按钮动态添加li
- Future Clalback使用案例
- unbind()清除指定元素绑定效果
- HDU4622 Reincarnation
- jQuery基础笔记 each和data(7)