浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)

效果如下:

加了红色边框的就是你实际的xxx.vue页面,放大时放大至页面左上角,缩小时,缩小至中间

这是浏览器最小化后

一.给App.vue设置minWidth、minHeight、maxWidth以及maxHeight,值为浏览器的可视窗口大小(我的浏览器不全屏的时候是1920*937,全屏的时候是1920*1080)

1.在main.js中获取浏览器的宽高,并挂载到全局变量上以便使用

// 浏览器窗口,这个地方值不会变,你任意拉扯浏览器也不会改变,获取的是你打开项目时的初始状态
Vue.prototype.width = window.innerWidth;
Vue.prototype.height = window.innerHeight;

2.在app.vue中添加代码:

 mounted() {let that = this;// 这里的this.width和this.height就是main.js中全局挂载的两个变量this.pageSize(this.width, this.height);window.addEventListener("resize", function() {//这里传的参数是当前浏览器窗口的宽高that.pageSize(window.innerWidth, window.innerHeight);});},
methods: {pageSize(w, h) {let appDiv = document.getElementById("app");if (w == window.screen.width) {if (!this.isFullscreenForNoScroll()) {// 浏览器最大化但是未全屏appDiv.style.maxWidth = w + "px";appDiv.style.maxHeight = h + "px";appDiv.style.minWidth = w + "px";appDiv.style.minHeight = h + "px";} else {// 浏览器最大化且全屏appDiv.style.maxWidth = window.screen.width + "px";appDiv.style.maxHeight = window.screen.height + "px";appDiv.style.minWidth = window.screen.width + "px";appDiv.style.minHeight = window.screen.height + "px";}} else {// 浏览器不是最大化appDiv.style.maxWidth = this.width + "px";appDiv.style.maxHeight = this.height + "px";appDiv.style.minWidth = this.width + "px";appDiv.style.minHeight = this.height + "px";}},isFullscreenForNoScroll() {let wholeScreenFlag = false;var explorer = window.navigator.userAgent.toLowerCase();if (explorer.indexOf("chrome") > 0) {//webkitif (window.innerHeight === window.screen.height) {wholeScreenFlag = true;} else {wholeScreenFlag = false;}} else {//IE 9+  fireFoxif (window.outerHeight === window.screen.height) {wholeScreenFlag = true;} else {wholeScreenFlag = false;}}return wholeScreenFlag;}}

二.项目中其他页面如果想占满全屏的话要用100%,不要用100vh!!!

三.页面中字体大小用px设置,能保证在浏览器放大缩小的操作下,字体不乱,并且跟随页面放大缩小

四.找到index.html文件,给body设置相对定位,给body里的app设置绝对定位

body{position: relative;}
/* app内样式是绝对定位＋水平居中,能够实现页面缩小后居于中间**/#app {position: absolute;top: 0;left: 0;right: 0;margin: auto;}

然后在index.html文件里添加script标签以及下面的代码,为的是保证放大或者缩小页面的时候,背景图不变且不受影响,看起来美观一点,提示:index.html里引用的图片最好放在static或者public文件夹下,要保证打包的时候不被包含在内(如果不加背景图就不用写下面这些代码了)

<script>var bodyDiv = document.body;var appDiv = document.getElementById('app');// bodyDiv.clientWidth是当前浏览器的可视区域(仅指的页面部分,不包含书签栏等)listenWidth(bodyDiv.clientWidth);window.addEventListener("resize", function () {listenWidth(bodyDiv.clientWidth);});function listenWidth(width) {// 获取当前屏幕分辨率的宽度var screenWidth = window.screen.width * window.devicePixelRatio;if (width < screenWidth) {// 说明当前浏览器的百分比是比100%大,呈现出来的效果是在放大页面,但实际页面像素是变小的appDiv.style.background = "url('./static/background-img/背景.png') center no-repeat";appDiv.style.backgroundSize = "100% 100%";bodyDiv.style.background = "";} else {// 说明当前浏览器的百分比是比100%小,呈现出来的效果是在缩小页面,但实际页面像素是变大的appDiv.style.background = "";bodyDiv.style.background = "url('./static/background-img/背景.png') center no-repeat";bodyDiv.style.backgroundSize = "100% 100%";}}</script>

但是!会有以下这种问题存在:

1.当你窗口小化后f5刷新页面,页面的宽高会变成当前浏览器小化窗口的宽高,最大化后需要再刷新一下才会恢复全屏;

2.为了解决上面的问题,我试着把app.vue里浏览器不是最大化的赋值代码换成浏览器最大化且全屏部分的代码,这时候问题一会被解决,但是会出现另一个问题,浏览器百分比为90%的时候,背景图没有占满屏幕,而且下方会有空白,利用控制台查看元素发现#app的高度比body的高度大,以至于造成这个问题,目前没有找到原因和解决办法;

---------------------------------------------------------------------------------------------------------------------------------

我最终想写出的效果是像csdn、掘金等官网一样,浏览器百分比缩小的时候,页面缩至中间;浏览器百分比变大的时候,页面放大至左上角;另外浏览器最小化最大化或者全屏的时候布局正常,我也看过他们的一些代码,我发现很多地方都是写的固定值,这并不适用于我现在这种情况.并且,最不一样的就是这些官网是属于展示类型,内容高度并不固定,越往下滚动,内容也会越来越多,跟后台系统的需求出发点就不一样,实在是抓耳挠腮,好难~

我现在新的想法是像他们一样,利用媒体查询给他们设置固定值,但是还仅限于想法,继续研究~

浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)相关推荐

解决ubuntu14.04下，火狐浏览器无法访问csdn官网问题
玩linux系统真的就像打怪升级,每一天一个新的惊喜呢(微笑脸),就算生气也要保持微笑哦! 继上次校园网认证失败,输入法用户体验感极差,dns修改失败等等问题之后,今天居然连csdn大本营都不能访问! ...
小程序开发之页面布局
Flex布局又称弹性布局,在小程序开发中比较适用.因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了. 网页布局(layout)是CSS的一个重点应用. 布局的传统 ...
微信小程序开发之页面布局
一.概述 Flex布局又称弹性布局,在小程序开发中比较适用.网页布局(layout)是CSS的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + f ...
关于静态页面布局中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
html清除浮动标签,页面布局的排列规则是什么？怎样清除浮动标签？
初学者在设计一个页面时,默认的排版方式是将页面中的标签从上到下一一罗列.例如,图1展示的就是采用默认排版方式的效果. 图 1 模块默认排列方式通过这样的布局制作出来的页面布局参差不齐.然而大家在浏览 ...
页面布局-----display:flex详解
简介: display:flex是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
wordpress page显示未找到页面_通过Avada主题了解网页基本结构和页面布局
Avada主题是目前很流行的国外建站主题,我们在学习 avada主题建站初期有必要先了解网页基本结构和页面布局情况,这样对后面使用 avada主题建站,了解 avada主题Theme Options设 ...
SharePoint 2013 入门教程之创建页面布局及页面
原文:SharePoint 2013 入门教程之创建页面布局及页面在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoi ...
如何删除下一页分节符_页面布局里分节符添加的下一页空白页怎么删 - 卡饭网...
word2010怎么插入分节符 word2010怎么插入分节符通过在Word2010文档中插入分节符,可以将Word文档分成多个部分.每个部分可以有不同的页边距.页眉页脚.纸张大小等不同的页面设置. ...

浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)

浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)相关推荐

最新文章

热门文章