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 ...
随机推荐
- “全栈2019”Java第二十章:按位与、按位或、异或、反码、位运算
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- jmeter处理json(关联)
例:用户需要登录成功后才可进行充值,进行充值操作时需要获取登录成功返回的sign值,在jmeter中可以通过关联的方式进行处理. jmeter中json path插件的使用方法:http://www. ...
- [Flex] 组件Tree系列 —— 将数组作为dataProvider
mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:将数组作为dataProvider ...
- iOS 键盘的监听 调整view的位置
iOS在处理键盘的出现和消失时需要监听UIKeyboardWillChangeFrameNotifications/UIKeyboardDidHideNotifications - (void)vie ...
- Python的__getattribute__二三事
本来以为自己对__getattribute__已经比较了解了,结果用到的时候,才发现有一些知识点之前一直没有真正弄明白,记录如下(针对python3,python2差异较大): object类有__g ...
- JAVA JVM 杂谈(一)
JVM能够跨计算机体系结构来执行Java字节码,主要是由于JVM屏蔽了与各个计算机平台先关的软件或者硬件之间的差异,使得与平台先关的耦合统一由JVM的提供者来实现. JVM结构组成: 1.类加载器:在 ...
- Jquery sblings
$("给定元素").siblings(".selected") 中的(".selected")表示筛选给定元素类名为.selected的同胞 ...
- Maximum call stack size exceeded
写vue时报了如下错误 Maximum call stack size exceeded 栈溢出,因为在调用函数时使用了递归调用,而且没有写跳出条件,导致了该错误
- Python开发转盘小游戏
Python开发转盘小游戏 Python 一 原理分析 Python开发一个图形界面 有12个选项和2个功能键 确定每个按钮的位置 每个按钮的间隔相同 点击开始时转动,当前选项的背景颜色为红色,其他 ...
- [转] java获取hostIp和hostName
[From] https://www.cnblogs.com/huluyisheng/p/6867370.html InetAddress的构造函数不是公开的(public),所以需要通过它提供的静态 ...