原理:利用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. “全栈2019”Java第七十一章:外部类访问静态内部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. AutoCAD.Net圆弧半径标注延长线

    #region 注册RegApp public static void CheckRegApp(string regapptablename) { Database db = HostApplicat ...

  3. [ActionSprit 3.0] FMS直播

    音视频流的发布(服务端) package { import flash.display.Sprite; import flash.events.NetStatusEvent; import flash ...

  4. PyQt5(1)——Qt Designer初探

    相关环境配置我们就不介绍了(网上有很多教程) Qt Designer 是一款十分强大的GUI工具,生成的文件为 .UI文件  可以通过命令转化为Py文件,简单来说我们可以通过拖拽方式生成界面,在通过简 ...

  5. C++默认构造函数的问题

    C++ defaul construct :缺省构造函数(默认构造函数) 定义:第一种   构造函数没有参数,即是 A()形式的 第二种   构造函数的全部参数由缺省值提供,A(int a=0,int ...

  6. [原创]SpringBoot上传图片踩的坑

    最近项目里面有个需求,要上传图片到阿里云的OSS服务.所以需要写个上传图片的接口给前端. 这个简单的接口本来就给分配了1个工时,感觉也蛮简单的.但编码过程中遇到了好几个问题,现在一一记录下来,避免再次 ...

  7. MSSQL远程连接操作(转)

    --遠程連接操作 /****************************************************************************************** ...

  8. 查找Ubuntu下包的归属

    今天在制作docker时,发现我的程序有些依赖的包不太好找应该安装什么. 在centos下面,可以用命令: rpm -qf <libraryname> 在Ubuntu下面,发现一个网站基本 ...

  9. 时钟时间,系统cpu时间,用户cpu时间

    进程的3种状态:阻塞,就绪,运行   度量一个进程的执行时间,unix为进程维护了3个时间,即时钟时间,用户CPU时间,系统CPU时间.   时钟时间又被称为墙上时钟时间,wall clock tim ...

  10. Oracle系统表整理 --sql

    -- DBA/ALL/USER/V_$/GV_$/SESSION/INDEX开头的绝大部分都是视图-- DBA_TABLES意为DBA拥有的或可以访问的所有的关系表.-- ALL_TABLES意为某一 ...