原理:利用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. [ActionScript 3.0] 通过BitmapData将对象保存成jpg图片

    此方法需要用到JPGEncoder.as和BitString.as这两个类,是将BitmapData对象转换成ByteArray,然后通过FileStream把此ByteArray写入到文件保存成jp ...

  2. 常用博客 API地址

    新浪博客 http://upload.move.blog.sina.com.cn/blog_rebuild/blog/xmlrpc.php 网易博客 http://os.blog.163.com/ap ...

  3. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  4. map集合根据value找key,默认取第一个key

    private static String getKey(Map<String,String> map,String value){ String key=""; fo ...

  5. 关于在iOS应用中跳转到AppStore

    1.获取app 在AppStore上的网址 eg: NSString * appURLStr = @"https://itunes.apple.com/cn/app/shi-ke-zu-qi ...

  6. windows10下使用ubuntu,并搭建nodejs环境

    1.首先要在win10的设置里打开开发人员使用模式 2.在bash下,下载ubuntu系统 3.安装git,因为要把下载nvm的话,需要git sudo apt-get install git 4.安 ...

  7. jquery中获取单选标签redio的val

    $('input:radio:checked').val();

  8. [转]IOS应用程序多语言本地化解决方案

    最近要对一款游戏进行多语言本地化,在网上找了一些方案,加上自己的一点点想法整理出一套方案和大家分享! 多语言在应用程序中一般有两种做法:一.程序中提供给用户自己选择的机会:二.根据当前用户当前移动设备 ...

  9. Service与BoardcastReceive

    开发service需要两个步骤: 1.定义一个继承Service的子类 2.在AndroidMainfest.xml文件中配置该Service. Service与Activity都是从Context派 ...

  10. C#集合之不变的集合

    如果对象可以改变其状态,就很难在多个同时运行的任务中使用.这些集合必须同步.如果对象不能改变器状态,就很容易在多个线程中使用. Microsoft提供了一个新的集合库:Microsoft Immuta ...