原理:利用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>

div按照屏幕尺寸(设备大小)进行缩放的更多相关文章

  1. Android设备网络、屏幕尺寸、SD卡、本地IP、存储空间等信息获取工具类

    Android设备网络.屏幕尺寸.SD卡.本地IP.存储空间.服务.进程.应用包名等信息获取的整合工具类. package com.qiyu.ddb.util; import android.anno ...

  2. ios设备屏幕尺寸与分辨率

    iOS 设备的屏幕尺寸.分辨率及其屏幕边长比例详细情况是怎样的? 根据屏幕尺寸和分辨率,ios现在数起来有6个版本.一,3GS:二,4s为代表:三,iphone5:四,ipad2为代表:五,ipad4 ...

  3. IOS 判断设备屏幕尺寸、分辨率

    根据屏幕尺寸和分辨率,ios现在数起来有6个版本. iOS 设备现有的分辨率如下: iPhone/iPod Touch 普通屏 320像素 x 480像素 iPhone .3G.3GS,iPod To ...

  4. ios开发之--所有设备的屏幕尺寸

    所有设备型号官网地址:https://www.theiphonewiki.com/wiki/Models iPhone: 机型 像素 比例 像素密度 屏幕尺寸 机型代码 发布日期 iPhone 2g ...

  5. 获取IOS屏幕尺寸大小

    转自:http://www.open-open.com/lib/view/open1395752090322.html 1.app尺寸,去掉状态栏 CGRect r = [ UIScreen main ...

  6. 移动端,多屏幕尺寸高清屏retina屏适配的解决方案

    移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...

  7. dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

    一.基本概念 dip        : Density independent pixels ,设备无关像素. dp        :就是dip px        : 像素 dpi       :d ...

  8. 创建支持多种屏幕尺寸的Android应用

    Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...

  9. iosiPhone屏幕尺寸、分辨率及适配

    iosiPhone屏幕尺寸.分辨率及适配     1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...

随机推荐

  1. 如果你创建了类似于下面的 Twitter 元素,那么它相关的类定义是啥样子的?

    代码: <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : < ...

  2. SimpleITK学习(一)基本概念

    断断续续使用simpleitk处理CT和X光图片有些时间了,但是学的知识都比较零散,没有形成系统的概念,于是对着SimpleITK的英文文档https://simpleitk.readthedocs. ...

  3. HDU4622 (查询一段字符串的不同子串个数,后缀自动机)

    http://acm.hdu.edu.cn/showproblem.php?pid=4622 题意:给出一个字符串和q次询问,每次询问[l,r]区间内不同子串的个数 分析: N<=2000. 我 ...

  4. js 中常见的深拷贝的方法

    建议最简单的第一种 1.通过 JSON 对象实现深拷贝 this.data = JSON.parse(JSON.stringify(this.vm.$store.state.security.menu ...

  5. 基于CIDR的IP分组转发算法

       话不多说,直接上运行截图         #include<iostream> #include<vector> using namespace std; struct ...

  6. Linux 开机、重启和用户登录注销、用户管理、用户组

    l 关机&重启命令   基本介绍: shutdown –h now 立该进行关机 shudown -h 1 "hello, 1 分钟后会关机了" shutdown –r n ...

  7. Java_break与continue区别

    使用场合不同 break:可以在switch case中使用,也可以在循环中使用   continue:只能在循环中使用,除了switch case 作用不同 break:表示中断,当在switch ...

  8. app唤起的完美解决方案,及阻止浏览器的默认弹窗行为

    https://stackoverflow.com/questions/10237031/how-to-open-a-native-ios-app-from-a-web-appvar frame = ...

  9. Linux下日志文件监控系统Logwatch的使用记录

    Linux下日志文件监控系统Logwatch的使用记录 原文:http://www.cnblogs.com/kevingrace/p/6519504.html 在维护Linux服务器时,经常需要查看系 ...

  10. centos 7编译安装mysql 5.7.17

    1.进入MySQL官网下载MySQL源代码 依次点击Downloads -> Community -> MySQL Community Server 源代码1.Select Operati ...