分辨率变化，页面固定不缩放 禁止页面缩放

最新推荐文章于 2024-04-26 22:10:25 发布
最新推荐文章于 2024-04-26 22:10:25 发布
阅读量496 收藏
点赞数
文章标签： html
原文链接：https://blog.csdn.net/qq_41831345/article/details/80676249
版权 

<meta name="viewport" content="width=device-width,user-scalable=no"/>

width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

如果不想让页面缩放，可以直接 user-scalable = no

会出现下面效果


当分辨率辩护时，页面固定大小不会一直缩放

如果不加这个属性，会是下面的效果


整个页面会跟着一起缩放

hey_hao
关注
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
自适应手机页面大小禁止缩放
weixin_30418341的博客
09-01 352
<script> /** * MobileWeb 通用功能助手，包含常用的 UA 判断、页面适配、search 参数转 键值对。 * 该 JS 应在 head 中尽可能早的引入，减少重绘。 * * fixScreen 方法根据两种情况适配，该方法自动执行。 * 1....
vue 固定分辨率，保持1920*1080
qq_46726888的博客
10-08 1062
【代码】vue 固定分辨率，保持1920*1080。
浏览器等比例缩放 一直保持在1920*1080的状态，浏览器不出现滚动条，但可以继续滚动...
weixin_30781107的博客
07-20 2466
html{ overflow-x: hidden; overflow-y: visible;}body{ width: 1920px; height: 1080px; background: url(../images/bg.png) 0% 0% / 100%; transform-origin: left top 0px; overflow-y: vis...
Vue3 解决电脑分辨率及缩放导致页面变形的问题
Tsinbo1314的博客
12-20 9980
Vue3 解决电脑分辨率不同导致的页面变形问题前言新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 最近在做一个项目，突然发现由于调整电脑的分辨率导致页面变形的问题。正常电脑显示的是100%，当调整电脑分辨率至125%
css 动态rem_CSS尺寸单位详解
weixin_39781326的博客
11-21 302
前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念(以下概念读起来可能有些晦涩，如果看不懂也没关系)像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。 在为桌面浏览器设计...
vue2保持屏幕缩放比例， 禁止浏览器缩放
weixin_45441173的博客
02-03 1097
vue2保持屏幕缩放比例， 禁止浏览器缩放
如何使页面在缩放的过程中不变形
peri_zxy的博客
05-23 1万+
（响应式布局）如何使页面在缩放的过程中不变形 今天在改造一个前端页面时，发现页面视图在pc端显示的好好的，一旦缩小页面或者打开开发者工具，进入移动端视图时，页面就会发生严重的变形。 导致观看效果特别不好，一开始我以为是我编写的代码有问题。 后来查阅资料才知道，要想使页面在缩放的过程中不变形。 可以使用响应式布局的方式。 什么是响应式布局？ 响应式布局（Responsive design），意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 响
移动端适配问题，华为手机页面展示变宽，内容展示不全？
weixin_43956521的博客
01-21 1865
1、检测微信内置浏览器 重置fontSize 大小 (function () { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { document.addEventListener("WeixinJSBridgeReady", handleFontSize
App应用字体大小保持固定以及关于Configuration的变化
wzhseu的博客
12-21 3025
前言安卓4.0之后系统设置->显示里面新增了字体大小设置的选项.看下你自己的安卓机,如果你将字体大小从小号一直增大到特大号,有没有发现某些安装的app里面的字体大小也随着变化了?这样可能是便于了阅读,但是app里面本来能显示完全的内容可能因此就只显示了部分.实际上,我们可以看一下QQ、淘宝等大厂的应用,里面的字体大小并不会随着系统设置的大小而变化.初始解决方法网上早已给出了解决办法,在Applica
页面不能随着浏览器放大缩小变化，这种情况叫作什么？---非响应式设计
China_ZJ的博客
04-26 363
是一种网页设计方法和网页布局技术，旨在使网页在各种屏幕尺寸下都能提供良好的阅读和导航体验，包括从桌面电脑显示器到移动设备的小屏幕。通过使用弹性布局、媒体查询和可伸缩的图片，响应式设计可以自动适应不同屏幕尺寸，确保网页内容在各种设备上都能正确显示。这意味着页面没有使用响应式设计原则，无法适应不同屏幕尺寸和分辨率，从而在不同设备和浏览器窗口大小下不能提供良好的用户体验。响应式网页设计（Responsive Web Design, RWD）
vue项目在不同分辨率下页面的适配
qq_41973526的博客
12-10 6537
媒体查询适配页面
vue 项目适配笔记本1920*1080 125%缩放
路虽远行则将至，事虽难做则必成。
02-01 5909
在台式机上开发pc端项目时，由于是1920*1080的分辨路和100缩放，看起来是没有问题。在笔记本上有问题因为现在很多14寸的笔记本，出厂默认就是125%或150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。网上有很多解决方案，但都是治标不治本，表面上是适配了，但是有很多坑。效果不是很好。比如布局挤变形了，第三方组件变形，按钮错位，部分白屏，执行不了。看着很不舒服。
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
amoureux555的博客
09-26 6084
Vue3 解决电脑分辨率125%、150%及缩放导致页面变形的问题
vue项目屏幕自适应_vue项目PC端随屏幕分辨率与窗口大小自适应（五步完成，吐血干货）...
weixin_34650199的博客
12-24 9338
又见面了鸭！前言：这是用webpack创建的项目【壹】不同屏幕分辨率效果展示：A、1920*1080分辨率全屏显示的情况下：image.pngB、1600*900分辨率全屏显示的情况下：image.pngC、1024*768分辨率全屏显示的情况下：image.png【贰】不同浏览器窗口缩放时的效果展示：A、正常浏览窗口显示：image.pngB、缩放浏览窗口显示：image.png【叁】上述HTM...
vue实现PC端分辨率适配
热门推荐
韩大璐
07-25 12万+
依赖 项目基础配置使用 vue-cli 生成 自适应方案核心： 阿里可伸缩布局方案 lib-flexible px转rem：px2rem，它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loade...
vue中使用rem布局解析+大屏自适应
Cassie's blog
10-18 6万+
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。 首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。 浅析rem 首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼 rem...
Vue实现屏幕分辨率自适应之一（伸缩布局 lib-flexible）
abcdTracy的博客
11-05 5495
新建Vue项目 步骤网上资料很多，这里不再赘述！ 安装依赖 1.安装阿里可伸缩布局依赖lib-flexible npm i lib-flexible -S 2. 安装px转rem依赖px2rem npm i px2rem -S 3.在项目的入口文件 main.js 里引入 lib-flexible import "lib-flexible" 因为依赖中当屏幕宽度大于540后，width固定写死了，需要修改依赖文件lib-flexible/flexible.js 4.验证一下是否起作用 在App.v
JS/JQ 实现无视系统和浏览器的缩放比例改为固定缩放比例
weixin_43852260的博客
11-19 7083
最近用笔记本做了一个网页，笔记本的系统缩放比是125%，浏览器是100%。 但是客户用的是台式机，客户的系统和浏览器的缩放比例都是100%，这个页面在100%会很丑，而且这个页面是为了全屏设计的，客户想不全屏的时候也能展示全所有信息。因此想尽可能少的改造代码就想到了zoom缩放。 zoom缩放的原理是： 1、先获取系统✖浏览器的缩放比例： window.devicePixelRatio;//假设系统缩放是100%，浏览器是100%,这个值就是1✖1=1 2、调整缩放： ...
页面固定缩放，浏览器固定缩放比例
最新发布
09-12
页面固定缩放是指网页设计时就确定了网页的显示尺寸，无论用户使用什么设备查看，网页都会保持一个固定的比例显示，不会随着浏览器的缩放功能而改变。这通常是通过CSS来控制的，比如使用视口元标签（viewport meta tag）或者CSS的transform属性来实现。 浏览器的固定缩放比例则是指用户在浏览器中手动设置的缩放级别，这个级别会应用到所有的网页上，使得用户在浏览不同网站时，页面都会按照这个缩放比例显示，以便适应用户的阅读喜好或视力需求。 实现页面固定缩放的方法如下： 1. 在HTML的<head>部分使用视口元标签来设置缩放比例： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 这里的`initial-scale=1.0`表示页面初始缩放比例为100%，固定不变。 2. 使用CSS的transform属性进行缩放： ```css body { transform: scale(0.8); transform-origin: top left; } ``` 这里的`transform: scale(0.8);`表示将页面整体缩小到原来的80%，而`transform-origin`设置变换的原点。 3. 通过JavaScript动态控制： ```javascript const bodyStyle = document.body.style; bodyStyle.transform = 'scale(0.8)'; bodyStyle.transformOrigin = 'top left'; ``` 这段代码同样可以实现页面的整体缩放，效果与CSS的transform属性相同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值