首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >viewport缩放方法,解决移动端自适配

viewport缩放方法,解决移动端自适配

作者头像
用户9914333
发布于 2022-07-21 12:12:32
发布于 2022-07-21 12:12:32
1.2K20
代码可运行
举报
文章被收录于专栏:bug收集bug收集
运行总次数:0
代码可运行

一、概述:

做了几年的移动端一直用 rem ,感觉最繁琐的就是 rem 的计算。随便可以用 css rem 自动计算,但是有时候感觉宽度跟高度的 rem 并不是完全准确。所以决定用 viewport 缩放来试试看效果,经过一些网友的帮忙测试,发现缩放 viewport 这种方法更简单、高效、准确

二、思路:

例如效果图是:750*1334(px)的源文件。

1、根据750 PSD源图 宽度尺寸进行比例缩放,高度并没有限制,所以高度是自由的

2、缩放viewport的同时,宽度跟高度是等比的,所以敢说这种方式比rem更准确。

三、js核心代码:

代码说明:切图时只需要按照PSD尺寸大小设置px即可,无需复杂的 rem 计算

js 代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function (doc, win) {
            var maxwidth = 750;//PSD源图 宽度尺寸
            var oMeta = document.getElementById('viewport');
            var docE1 = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    oMeta.content = "width=device-width,initial-scale=1.0,user-scalable=no";
                    var clientWidth = docE1.clientWidth;
                    var sca = (clientWidth / maxwidth);
                    sca = sca > 1 ? 1 : sca;
                    oMeta.content = "width=" + maxwidth + ",minimum-scale=" + sca + ",maximum-scale=" + sca + ",user-scalable=no,minimal-ui";
                };
            var orientchange = function () { 
                setTimeout(function () {
                    if (window.orientation == 180 || window.orientation == 0 || window.orientation == 90 || window.orientation == -90) {
                        recalc();
                    }
                }, 200);
            };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            doc.addEventListener(resizeEvt, orientchange, false);//横竖屏切换执行
        })(document, window);

html 代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

注:maximum-scale,minximum-scale,user-scalable=no 属性的设置,可能会限制缩放效果

总结:

使用缩放 viewport 来做移动端适配确实简单,但在缩放时,有人反应页面会出现糊的情况。 是否采用,自行权衡

< END >

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
2 条评论
热度
最新
求继续更新
求继续更新
回复回复1举报
666
666
回复回复1举报
推荐阅读
编辑精选文章
换一批
解决移动端适配rem单位在华为和三星手机出现bug
github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
7590
移动端页面自适应解决方案:rem 布局篇
假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的font-size属性,html5设计稿尺寸以及前端与设计之间协作流程一般分为下面两种。
用户1272076
2019/03/26
2.4K0
手机端页面自适应布局---rem
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px。否则,页面中html的font-size大小为:100*(当前页面宽度 / 640)。
用户1349575
2022/01/27
2K0
H5移动端rem适配
1 /** 2 * 移动端自适应 3 */ 4 <meta name="viewport" 5 content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> 6 // <!--content--> 7 // <!--width=device-width 可视区域的宽度,值可为数字或关键词de
ProsperLee
2018/10/24
1.5K0
移动端项目设配UI设计图方法
由于要使用UI的设计图,所以需要根据UI设定的尺寸来写页面 下面是移动端适配的方法 在script标签中执行 <script> (function (doc, win) {
用户10106350
2022/10/28
3680
H5页面移动端适配且要根据UI设计图给出的单位出图方法总结
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
5310
移动端布局攻略
作者:Tolonger 原文链接:https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外,rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里,对应的有什么效果,希望本文能给你一些有益的启示。除此之外还有响应式布局,固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路,他所有的组件以及模板ui均是百分比流式布局,单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的,方法简单,多端共用,可以针对
前端教程
2018/03/05
1.6K0
移动端布局攻略
08-移动端开发教程-移动端适配方案
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。
老马
2018/02/18
3.8K0
08-移动端开发教程-移动端适配方案
vue及原生html实现列表无缝上下滚动,以及单行滚动
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
3.9K0
Rem在移动端的适配
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <title></title> <!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> <scr
越陌度阡
2020/11/26
6300
canvas合成文字以及对文字进行换行处理
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
8230
如何写自适应分辨率的网页
方式一:用媒体查询"@media",这种写法好处是可以对不同分辨率的设备,展示完全不同的UI界面,一个页面不同的设备看的时候,展示内容可以不一样,交互方式可以不一样。不过这个不方便用在复杂的地方,而且不同的分辨率都需要对应的重新写样式,同一个页面集合太多的这种写法,最好是分开写两套,降低耦合性。但是这种写法费力不讨好,之前有的网站在PC和手机查看到的样式不一致,用了一些这个技术,但是后来很多都是检测到不同设备,就跳转到不同的网页上去了。
前端小tips
2021/12/11
2.7K0
如何写自适应分辨率的网页
移动端适配终极封装
var adaptive = {}; (function (win, lib) { var doc = win.document; var docEl = doc.documentElement; var devicePixelRatio = win.devicePixelRatio; var dpr = 1; var scale = 1; function setViewport() { var isIPhone = /iphone/gi.
用户10106350
2022/10/28
6000
移动端适配大法
前端代码的编写永远逃不过“兼容”二词,从前PC时代,因为IE的傲娇,导致程序猿们一直在兼容IE的道路上挣扎,如今移动设备的普及,仿佛让我们看到了希望,仿佛马上就要摆脱IE了,可是!一波还未平息,一波又来侵袭~移动端确实不用考虑IE了,各种CSS新特性也用的爽到飞起,但一座大山压了过来,那就是分辨率的适配,移动端由于展示区域比较小,因此对于页面在不同分辨率手机上的展示细节也要求更加严格,这时像PC端有些固定宽高的布局方式显然不适应,我们被要求对于不同大小手机页面能自适应,真是非常有(tong)趣(ku)呢~ 话不多说,下面就总结了一些移动端常用的适配手法:
IMWeb前端团队
2019/12/03
2.9K0
HTML+CSS,PC端/手机端公用部分样式代码整理(建议收藏)
我们一般都会提一个 .overflow {overflow:hidden} 方便布局,也可以有效的阻止移动端上下左右拖动问题(溢出问题)
程序员纬度
2021/03/02
2.2K0
前端学习笔记—移动端web开发
响应式网站:即pc和移动端共用一套网站,只不过在不同宽度的屏幕下,样式会自动适配。配合媒体查询监听,通过判断屏幕宽度来改变样式,以适应不同终端。例如:三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦,需要花很大精力去调兼容性问题
木溪bo
2024/03/23
3840
前端学习笔记—移动端web开发
canvas合成任意数量图片、合成二维码加文字封装处理
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
7390
前端工程师之移动端布局方案
百分比布局是一种等比例缩放的布局方式,也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。
张哥编程
2024/12/13
3640
HTML+CSS,PC端/手机端公用部分样式代码整理(自己收藏)
我们一般都会提一个 .overflow {overflow:hidden} 方便布局,也可以有效的阻止移动端上下左右拖动问题(溢出问题)
用户5997198
2019/08/12
3K0
微信小程序布局单位的使用
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
用户2305175
2018/06/24
3.3K0
推荐阅读
相关推荐
解决移动端适配rem单位在华为和三星手机出现bug
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档