div按照屏幕尺寸(设备大小)进行缩放
原理:利用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按照屏幕尺寸(设备大小)进行缩放的更多相关文章
- Android设备网络、屏幕尺寸、SD卡、本地IP、存储空间等信息获取工具类
Android设备网络.屏幕尺寸.SD卡.本地IP.存储空间.服务.进程.应用包名等信息获取的整合工具类. package com.qiyu.ddb.util; import android.anno ...
- ios设备屏幕尺寸与分辨率
iOS 设备的屏幕尺寸.分辨率及其屏幕边长比例详细情况是怎样的? 根据屏幕尺寸和分辨率,ios现在数起来有6个版本.一,3GS:二,4s为代表:三,iphone5:四,ipad2为代表:五,ipad4 ...
- IOS 判断设备屏幕尺寸、分辨率
根据屏幕尺寸和分辨率,ios现在数起来有6个版本. iOS 设备现有的分辨率如下: iPhone/iPod Touch 普通屏 320像素 x 480像素 iPhone .3G.3GS,iPod To ...
- ios开发之--所有设备的屏幕尺寸
所有设备型号官网地址:https://www.theiphonewiki.com/wiki/Models iPhone: 机型 像素 比例 像素密度 屏幕尺寸 机型代码 发布日期 iPhone 2g ...
- 获取IOS屏幕尺寸大小
转自:http://www.open-open.com/lib/view/open1395752090322.html 1.app尺寸,去掉状态栏 CGRect r = [ UIScreen main ...
- 移动端,多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
- dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
一.基本概念 dip : Density independent pixels ,设备无关像素. dp :就是dip px : 像素 dpi :d ...
- 创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...
- iosiPhone屏幕尺寸、分辨率及适配
iosiPhone屏幕尺寸.分辨率及适配 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...
随机推荐
- [ActionScript 3.0] 通过BitmapData将对象保存成jpg图片
此方法需要用到JPGEncoder.as和BitString.as这两个类,是将BitmapData对象转换成ByteArray,然后通过FileStream把此ByteArray写入到文件保存成jp ...
- 常用博客 API地址
新浪博客 http://upload.move.blog.sina.com.cn/blog_rebuild/blog/xmlrpc.php 网易博客 http://os.blog.163.com/ap ...
- Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- map集合根据value找key,默认取第一个key
private static String getKey(Map<String,String> map,String value){ String key=""; fo ...
- 关于在iOS应用中跳转到AppStore
1.获取app 在AppStore上的网址 eg: NSString * appURLStr = @"https://itunes.apple.com/cn/app/shi-ke-zu-qi ...
- windows10下使用ubuntu,并搭建nodejs环境
1.首先要在win10的设置里打开开发人员使用模式 2.在bash下,下载ubuntu系统 3.安装git,因为要把下载nvm的话,需要git sudo apt-get install git 4.安 ...
- jquery中获取单选标签redio的val
$('input:radio:checked').val();
- [转]IOS应用程序多语言本地化解决方案
最近要对一款游戏进行多语言本地化,在网上找了一些方案,加上自己的一点点想法整理出一套方案和大家分享! 多语言在应用程序中一般有两种做法:一.程序中提供给用户自己选择的机会:二.根据当前用户当前移动设备 ...
- Service与BoardcastReceive
开发service需要两个步骤: 1.定义一个继承Service的子类 2.在AndroidMainfest.xml文件中配置该Service. Service与Activity都是从Context派 ...
- C#集合之不变的集合
如果对象可以改变其状态,就很难在多个同时运行的任务中使用.这些集合必须同步.如果对象不能改变器状态,就很容易在多个线程中使用. Microsoft提供了一个新的集合库:Microsoft Immuta ...