Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >viewport缩放方法,解决移动端自适配

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

作者头像
用户9914333
发布于 2022-07-21 12:12:32
发布于 2022-07-21 12:12:32
1.2K00
代码可运行
举报
文章被收录于专栏: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
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
web移动端适配方案实践
移动端web页面的开发适配一直是前端开发津津乐道的话题,在实际开发过程中,移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因,下文的方案是团队选择的能较好满足当前项目需求的方案,已经经过线上用户的考验,但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
CS逍遥剑仙
2019/09/02
3.2K0
移动端项目设配UI设计图方法
由于要使用UI的设计图,所以需要根据UI设定的尺寸来写页面 下面是移动端适配的方法 在script标签中执行 <script> (function (doc, win) {
用户10106350
2022/10/28
3540
手机端页面自适应布局---rem
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px。否则,页面中html的font-size大小为:100*(当前页面宽度 / 640)。
用户1349575
2022/01/27
2K0
web移动端适配方案实践
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
csxiaoyao
2019/09/18
1.7K0
web移动端适配方案实践
H5页面移动端适配且要根据UI设计图给出的单位出图方法总结
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
5210
移动端页面自适应解决方案:rem 布局篇
假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的font-size属性,html5设计稿尺寸以及前端与设计之间协作流程一般分为下面两种。
用户1272076
2019/03/26
2.3K0
CSS尺寸单位介绍
前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍
陌上寒
2019/04/02
1.7K0
CSS尺寸单位介绍
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
6140
H5页面适配及微信默认字号问题的最佳实践
移动端适配最简单的是通过js动态计算 viewport 的缩放值,但过于粗暴,会导致页面图片文字失真模糊。目前,移动端页面一般使用 rem 或 vw / vh 开发会较为方便,下面以 rem 为例:
CS逍遥剑仙
2021/04/04
3.8K0
移动端布局攻略
作者:Tolonger 原文链接:https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外,rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里,对应的有什么效果,希望本文能给你一些有益的启示。除此之外还有响应式布局,固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路,他所有的组件以及模板ui均是百分比流式布局,单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的,方法简单,多端共用,可以针对
前端教程
2018/03/05
1.5K0
移动端布局攻略
移动 web 开发最佳实践
刘春鹏
2017/06/14
3.3K0
移动 web 开发最佳实践
canvas合成任意数量图片、合成二维码加文字封装处理
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
7220
canvas合成文字以及对文字进行换行处理
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
8030
js实现文字竖向滚动
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
25.3K0
前端学习笔记—移动端web开发
响应式网站:即pc和移动端共用一套网站,只不过在不同宽度的屏幕下,样式会自动适配。配合媒体查询监听,通过判断屏幕宽度来改变样式,以适应不同终端。例如:三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦,需要花很大精力去调兼容性问题
木溪bo
2024/03/23
3520
前端学习笔记—移动端web开发
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
移动端适配终极封装
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
5880
前端工程师之移动端布局方案
百分比布局是一种等比例缩放的布局方式,也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。
张哥编程
2024/12/13
2890
相关推荐
H5移动端rem适配
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验