viewport initial-scale，zoom 兼容性探索

最新推荐文章于 2023-03-08 13:38:54 发布
原创 最新推荐文章于 2023-03-08 13:38:54 发布 · 522 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了三种实现页面整体缩放至一半的方法：使用div样式transform, initial-scale与html样式zoom。每种方法都有其局限性，如position:sticky显示问题、iframe兼容性和iOS设备支持。文章建议优先考虑transform方法，并通过间接手段解决sticky定位问题。
部署运行你感兴趣的模型镜像

有几种方式可以做页面的整体缩放为原来的一半

  1. div 样式 transform : scale(0.5)， 弊端： position: sticky 无法在transform过的元素里正常显示。
  2. initial-scale 0.5 弊端： iframe嵌入时有问题。
  3. html 样式 zoom: 0.5 弊端：ios不兼容

没有完美的方案。
但方案1弊端小， position sticky可以通过复制html 元素间接实现。
方案2在不需要iframe时很好。
方案3不如方案2.

您可能感兴趣的与本文相关的镜像

Qwen-Image-Edit-2509

Qwen-Image-Edit-2509

图片编辑
Qwen

Qwen-Image-Edit-2509 是阿里巴巴通义千问团队于2025年9月发布的最新图像编辑AI模型，主要支持多图编辑，包括“人物+人物”、“人物+商品”等组合玩法

viewportscale:跨视口宽度线性缩放字体大小，边距，填充等
05-25
视口比例 跨视口宽度线性缩放字体大小，边距，填充等。 如何使用 在您的sass文件中导入_viewportscale.scss ： @import " viewportscale " ; 现在，您可以像这样使用vs mixin： @include vs ( $property , $min-viewport-width , $min-size , $max-viewport-width , $max-size ); 例子1 h1 { @include vs ( font-size , 320 px , 32 px , 960 px , 48 px ); } 它将被编译为： h1 { font-size : 32 px ; } @media screen and ( min-width : 320 px ) { h1 { font-
【viewport】移动设备的兼容性问题
weixin_33755557的博客
07-13 292
前段时间用微信开发者工具重构一个菜单项目的时候发现在安卓设备上显示没有问题，在iphoneSE显示不全以及布局错乱的问题，找到了一个简单粗暴的解决方法。 首先，移动设备上的viewport分为layout viewport 、visual viewport和ideal viewport 三类， 其中ideal viewport最适合移动设备，其宽度等于移动设备的屏幕宽度，只...
详解meta-viewport标签中的width和initial-scale属性
热门推荐
leman314的博客
12-29 2万+
视口 视口可以理解为设备或文档对象的逻辑尺寸。 前端ppk大神认为，移动设备上有三个viewport（视口）。 但可以换句话说，可以缩放的浏览器中都具有三个视口概念，分别是 布局视口、视觉视口、理想视口。 1. 布局视口 layout viewport 布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。 在PC端上，布局视口宽度默认等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。 由于
关于html中viewport和initial-scale以及device-width的理解
胡聊前端的博客
01-05 7715
上图是一些放大镜，不是打酱油的… 我们在初始化一个html页面的时候，往往会首先在页面头部加上这样一个标签： <meta name="viewport" content="width=device-width, initial-scale=1"> 那么这个标签中viewport，width=device-width, initial-scale=1分别都是什么意思，为什么需要这样设置呢？ 首先说一下viewport，中文翻译过来可以称为视窗。 我举个简单的例子： 比如你使用放大镜去看清明上河.
前端自适应适配规则
小菜鸟的博客
03-26 3692
前端自适应适配规则 看了很多博客写的很乱讲的很官方，因此在这里我稍微提起一点 首先通用文件适配器 等于屏幕宽度除以设计搞宽度*100除以16 在这里我一个一个解释 首先1.屏幕宽度等于你当前的屏幕宽度 2.设计搞宽度取决与你的ui宽度 ，我的ui给我的是640px 3.乘以100 很多人就很离谱这个都不解释，你还写个锤子博客，100是你的基准值，也就是你使用的切图工具的基准值，一般这个是可以自己设置的不是死的，打个比方，ui给你的设计搞是640px，设置基准值为100之后应该是6.4rem 4.除以16就
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1.5, viewport-fit=cover" /> 我这样设置了 浏览器最大还是能变为百分之五百 最小百分之二十五
06-18
==1){document.querySelector('meta[name="viewport"]').content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no';}}});```**注意**：这种方法可能效果有限，且频繁重置...
function resetPageTo100Percent() { var viewport = document.querySelector("meta[name=viewport]"); const viewport = document.querySelector('meta[name="viewport"]'); var originalContent = viewport.getAttribute('content'); if (viewport) { viewport.setAttribute( 'content', 'width=device-width, initial-scale=0.4, maximum-scale=0.4, minimum-scale=0.4, user-scalable=no, shrink-to-fit=no' ); setTimeout(function() {viewport.setAttribute('content', originalContent);}, 50); } }
最新发布
11-07
结合之前推荐的两种方法，我们采用修改viewport的方法作为主要方法，同时添加一些兼容性处理。此外，我们还可以添加CSS变换作为备选方案（如果主要方法在某些设备上失效）。 ```javascript /** * 重置页面缩放至...
使用vue3-scale-box禁止页面缩放 怎么实现
03-08
meta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' document.head.appendChild(meta) ``` 3. **事件监听增强**： ```js // 在组件内补充防止手势操作 document....
我的html文件为<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #map{ width: 400px; height: 250px; } </style> </head> <body> <div id="map"></div> <script src="./index.js"></script> </body> </html>其中js文件为import 'ol/ol.css'; import {Map,view} from 'ol'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; const map = new Map({ target: 'map', layers:[ new TileLayer({ source:new OSM() }) ], view: new ViewTransition({ center: [0,0], zoom: 0 }) })哪里有错误呢
03-29
- 确保所有依赖已正确安装，比如OpenLayers的版本是否兼容。 最后，建议用户检查浏览器控制台的错误信息，这通常会明确指出问题所在，比如未定义的构造函数或语法错误。您的代码存在三处关键错误，以下是逐项修正...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一个离线地图</title> <link rel="stylesheet" href="./leaflet/leaflet.css" /> <style> #map { width: 100%; height: 100vh; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script src="./leaflet/leaflet.js"></script> <script> var map = L.map('map', { center: [22.533013, 113.930476], zoom: 15 }) // 添加瓦片图层 L.tileLayer('public/mapabc/roadmap/{z}/{x}/{y}.png', { }).addTo(map); // 添加一个点标记 var marker = L.marker([22.535863, 113.928591]).addTo(map); // 绑定弹窗内容，并打开弹窗 marker.bindPopup("这是深圳市南山区的一个点标记").openPopup(); </script> </body> </html> 看得懂不？
06-21
- **浏览器兼容性**：确保浏览器支持 HTML5 和 JavaScript。 --- ### 示例改进版代码 以下是稍微改进的版本，增加了错误处理和注释： ```javascript // 初始化地图 var map = L.map('map', { center: [22.533013...
移动端适配:viewport的浅谈！
shuixiou1的博客
04-07 1110
一、先说下二种可以全局动态修改此标签属性的二种方法     1、采用document.write();  它可以在没关闭流的时候，给页面增加东西。 ;(function(){ document.write('&lt;meta name="viewport" content=""&gt;'); })();     2、采用先设定一个meta标签，然后用js改写此meta标签属性的方式，...
meta viewport 怎样处理 移动端 1px 被 渲染成 2px 问题
编程爱好者之家
11-13 2378
首先我们看下viewport的结构： &lt;metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/&gt; //width设置viewport宽度，为一个正整数，或字符串‘device-...
viewport在pc端是否生效_PC端、移动端的页面适配及兼容处理
weixin_39963440的博客
12-21 613
一、关于移动端兼容性目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。第一种是通过响应式或页面终端判断去实现一套资源适配所有终端；第二种是通过终端判断分别调取两套资源以适配所有终端。这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓”合适的才是最好的”。思路一:通过响应式或页面终端判断去实现一套资源适配所有终端优势：只需维护一套资源，维护成本较低。劣势：需加载适配各个终端的各个资源，...
viewport详解
qq 2903359018博客
10-22 1998
这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇，不复杂。 viewport简介 没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各种行为。 该特性最先由Apple引入，用于解决移动端的页面展示问题，后续被越来越多的厂商跟进。 举个简单的例子来讲为什么会需要它： 我们知道用户大规模使用手机等移动设备来进行网页浏览器，其实得益于智能手持设备的兴起，也就是近几年的事。（
viewport 缩放适配 设置viewport缩放模式
weixin_51794873的博客
03-08 751
获取设备宽度，以375px为基础对设宽度进行缩放。viewport 缩放适配。
响应式布局——视口viewport和常用单位
weixin_51081257的博客
11-25 3427
了解一下响应式布局视口和视口常用单位
【转】移动端自适配 力荐viewport缩放解决方案
bug收集
10-19 771
一、概述： 做了几年的移动端一直用 rem ，感觉最烦琐的就是 rem 的计算。随便可以用 css rem 自动计算，但是有时候感觉宽度跟高度的 rem 并不是完全准确。所以决定用 viewport 缩放来试试看效果，经果一些网友的帮忙测试，发现缩放 viewport 这种方法更简单、高效、准确 二、思路： 例如效果图是：750*1334(px)的源文件。 1、根据750 PSD源图 宽度尺寸进行比例缩放，高度并没有限止，所以高度是自由的 2、缩放viewport的同时，宽度跟高度是等比的，.
手机端的viewport属性
qq_37555524的博客
09-10 381
Window.devicePixelRatio This read-only property returns the ratio of the resolution inphysical pixe...
93、Viewport详解
sunnnnh的博客
08-04 4245
一、viewport概念 （1）移动端的viewport： 就是设备的屏幕上用来显示我们的网页的那一块区域； viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大（浏览器会出现横向滚动条），也可能比浏览器的可视区域要小。 （2）css中的1px并不是代表屏幕上的1px ： 分辨率越大（物理像素），css中1px代表的物理像素就会越多（css像素是viewport的一个小方格）； 手机屏幕的分辨率已经越来越高（物理像素），但屏幕尺寸却没有发生太大变化，必须让css中的1px代
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值