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 ...
随机推荐
- JVM_垃圾收集器
最近刚好有时间,就简单的看了下JVM的几种垃圾回收器,它们都是计算机历史发展的产物,先简单的做一个整理,并没有哪一款垃圾收集器就一定是最优,还需要结合使用场景.参数配置等进行考量,根据系统情况搭配出尽 ...
- HTTP请求的两种方式get和post的区别
1,get从服务器获取数据:post向服务器发送数据: 2,安全性,get请求的数据会显示在地址栏中,post请求的数据放在http协议的消息体: 3,从提交数据的大小看,http协议本身没有限制数据 ...
- php中签名公钥、私钥(SHA1withRSA签名)以及AES(AES/ECB/PKCS5Padding)加密解密详解
由于http请求是无状态,所以我们不知道请求方到底是谁.于是就诞生了签名,接收方和请求方协商一种签名方式进行验证,来取得互相信任,进行下一步业务逻辑交流. 其中签名用得很多的就是公钥私钥,用私钥签名, ...
- Angular material mat-icon 资源参考_Hardware
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- Mac退出vim
按下ESC后输入:才能进入命令模式! 进入之后输入: qw (保存退出) 然后按2次大写Z退出 q! (不保存退出) 输入后回车退出
- IE8 placeholder不支持的兼容性处理
引入 <script type="text/javascript" src="<%=path%>/common/js/jquery/jquery.min ...
- python 实现dns 解析发送接收报文
http://www.qingruxu.com/code/python/851.html https://tools.ietf.org/html/rfc1035里面的图不一定正确,可以使用抓包软件来进 ...
- cmake 简学
https://www.cnblogs.com/cv-pr/p/6206921.html
- Java 数据表映射
一对多映射 class Province { //每一个类就相当于数据库中的一个表: private int pid ; private String name ; private City citi ...
- input获得焦点时改变placeholder文本的样式
HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...