F11快捷键自适应缩放全屏(CSS示例)

一、F11快捷键

在使用B/S系统时，为了突出展示系统功能，一般会按F11快捷键将浏览器全屏展示。全屏展示时将浏览器的地址栏、书签栏、PC机的任务栏等都被隐藏，显示器仅仅显示整个web系统的所有元素，而忽略其他元素。在大屏展示或者需要触屏操控等场景中很有用。

二、显示器分辨率

市面上显示器的分辨率有很多，如1024×768、1440×900，1280×1024，1400×1050...等等。其中1920x1080已经成为主流的显示器分辨率。web开发中常常以1920x1080作为标准。

三、本示例目标

本实例按1920x1080的分辨率开发一个界面，当用户全屏或缩小页面时，使用CSS代码等比例扩大或缩小页面。

四、获取界面各种宽高度

//获取浏览器可视区域高度和宽度，该值随浏览器放大缩小变化而变化
console.log("$(window).width():"+$(window).width())//1920
console.log("$(window).height():"+$(window).height())//937//获取页面文档的高度和宽度，该值不会因浏览器放大缩小而改变
console.log("$(document).width():"+$(document).width());
console.log("$(document).height():"+$(document).height());
//获取屏幕分辨率的高度和宽度
console.log("window.screen.width:"+window.screen.width)//1920
console.log("window.screen.height:"+window.screen.height)//1080
//获取屏幕分辨率的可用高度和宽度，不包括任务栏高度
console.log("window.screen.availWidth:"+window.screen.availWidth)//1920
console.log("window.screen.availHeight:"+window.screen.availHeight)//1080//获取页面body的高度和宽度
console.log("$(document.body).height()"+$(document.body).height());
console.log("$(document.body).width()"+$(document.body).width());
//获取页面body的总高度和总宽度，包含边框、内边距和外边距
console.log("$(document.body).outerHeight(true)"+$(document.body).outerHeight(true));
console.log("$(document.body).outerWidth(true)"+$(document.body).outerWidth(true));

五、关键代码

需要引入jquery.min.js类库：<script src="lib/jquery/dist/jquery.min.js"></script>。

使用CSS中的transform属性，该属性可以实现缩放元素的功能。在Jquery中如下设置CSS样式，ratioX表示X轴的缩放比例，ratioY表示Y轴的缩放比例。

$('body').css({transform: "scale(" + ratioX + ", " + ratioY + ")",transformOrigin: "left top",backgroundSize: "100% 100%",
});

希望在页面加载时以及用户改变界面大小时触发，使用以下函数实现：

window.addEventListener('load', adaptation);
window.addEventListener('resize', adaptation);

六、发现的问题

这个界面很简单，就是一些DIV堆叠沾满了整个界面，大小是1920x1080。不曾想，经过测试，界面上总会出现滚动条，很碍眼，经过思考，估计原因是当垂直方向出现滚动条时，页面宽度将会减少。而滚动条的宽度是17px，故而实际可用的宽度是1903。把界面DIV总宽高改为1903×1080，问题得到解决。

经过测试，当用户显示器分辨率是1920x1080时，全屏扩大或者拖动缩小页面，页面显示还算完美。只是，此界面在更高的分辨率中显示，如4096×3072等，显示得乱套了！或许需要使用媒体查询那些来实现吧。

下载码：B53A02D0C6

下载码是啥？如何下载=》点击查看

F11快捷键自适应缩放全屏(CSS示例)相关推荐

esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
计算机全屏显示快捷键,最全电脑快捷键，电脑全屏按哪个键原来是这样的
平时上班总是觉得电脑技能差.工作效率慢?只会使用Ctrl+C和Ctrl+V,却不知道很多快捷键的用法?赶紧来学习这些最常用的新技能吧!熟练后能让你快速提升工作效率哦~↓↓↓ 工具/材料电脑键盘操 ...
html中背景图按比例缩放全屏显示
html中背景图按比例缩放全屏显示,核心代码如下div: <body style="height: 100%; margin: 0;" onload="create ...
全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
html 全屏显示某个区域,JS实现指定区域的全屏显示功能示例
本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: www.jb51.net js指定区域全屏 #fulldiv { background: #fff; width: 10 ...
vue 屏幕自适应及全屏放大缩小
1. <div id="screen-content" :class="{'fix':!flag}"><div id="main&q ...
Vscode快捷键失灵屏幕全屏无法退出
...检查下是否切换到了大写输入模式另外想到了一个差不多的,就是屏幕全屏无法退出,试试F11
小游戏画面清晰自适应手机全屏
用固定尺寸568,320画布做背景尺寸.const canvas = wx.createCanvas(568 * , 320 * );出现画布被拉伸至全屏现象.改用以下办法做补救.(最近发现是上屏画布 ...
android4.0.3去掉底部状态栏statusbar，全屏显示示例代码
要去掉android4.0上的状态栏,全屏显示的代码如下: 1.将usleep和killall这二个文件放到assets文件夹下.这二个文件可在下面的附件中下载到. 2.创建Device.java(注 ...

F11快捷键自适应缩放全屏(CSS示例)

F11快捷键自适应缩放全屏(CSS示例)相关推荐

最新文章

热门文章