移动端页面不需要在meta加_移动端适配viewport缩放方案

1. 前言

设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。

a1a42598793dece06104a312ad9b2939.png

采用viewport缩放的方案能又快又好的实现需求。

2. 原理

在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异,而是直接按设计稿的标注来开发。比如设计稿里标注的文字字号是30px,CSS里就设置文字字号30px。

页面开发好后,在HTML的head标签里加入 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" > 。

举个例子。假设设计师交付的设计稿宽度是750px,设计稿上一个标题字号标注的是32px 、margin是20px。我们以标注的大小来写CSS。之后需要通过JavaScript计算获取屏幕的宽度(假设需要适配逻辑像素宽度是428px的屏幕),在HTML的head里添加 <meta name="viewport" content="width=750px, initial-scale=0.57" > 即可(428/759 = 0.57)。

这段代码的意思是:设置布局视口(layout viewport)的宽度为750px(此时页面一般会超出屏幕),再缩放页面(initial-scale)使其恰好撑满屏幕。

3. 适配代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script>const WIDTH = 750const mobileAdapter = () => {let scale = screen.width/WIDTHlet content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`let meta = document.querySelector('meta[name=viewport]')if(!meta) {meta = document.createElement('meta')meta.setAttribute('name', 'viewport')document.head.appendChild(meta)} meta.setAttribute('content', content)}mobileAdapter()window.onorientationchange = mobileAdapter</script>
</head>
<body>...
</body>
</html>

优点与缺点

  • 优点: 开发流程很简单,工程师只需根据设计稿标注还原页面,不需要额外计算。适配范围广。
  • 缺点: 页面整体放大缩小,对于不想缩放的元素无法控制。比如边框在大屏手机下显得很粗,在小屏手机下显得很细(下图所示)。

09aa1be9d43d7b4d736f1486e58859e7.png

我们更需要一种既能整体缩放,又能个性化控制某些元素不缩放的方案。见下篇文章:移动端动态REM方案。

下一篇:移动端动态REM适配方案​mp.weixin.qq.com

4. 最后

  • 如果本文对你有帮助,点个赞给作者一点小小的鼓励让我坚持更新
  • 最近的文章为前端剑指offer系列,是面向大厂求职的文章合集,关注公众号「 编程公子 」提前看到文章更新

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264192.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(转)用 Fiddler 看看 UpdatePanel 发生了什么

第一个 ASP.NET AJAX 程序&#xff1a;UpdatePanel一文中介绍了 UpdatePanel 实现 Ajax&#xff0c;我们今天利用 Fiddler 来看看 UpdatePanel 发生了什么。 实验步骤 启动 Fiddler&#xff0c;访问我们事先写好的 UpdatePanel 网页&#xff08;注意不要用 127.0.0.1 或 localh…

基于Google Reader发展起来的个性化推荐系统之三大问题

郑昀玩聚SR 20091003 中科院的xlvector(即项亮&#xff0c;他所在的团队The Ensemble在7月份获得Netflix大奖赛公开测试排名第一&#xff0c;但在9月22日Netflix宣布BPC获胜&#xff0c;原因据说只是因为项亮他们提交结果晚了20分钟)最近发布了一个小工具GRSuggest&#xff0c;…

直接从chrome中复制的body到postman中希望能自动识别去除空格

Describe the bug直接从chrome开发者工具中request的body复制到postman中时会带有空格&#xff0c;需要手动删除空格。 To Reproduce1、使用chrome开发者工具抓取一个post请求2、复制请求中参数3、粘贴到postman的body中 Expected behavior3、把带的空格删除掉 转载于:https://…

RichTextBox 右键显示 ContextMenuTrip

说明&#xff1a; (1)命名&#xff1a; RichTextBox -> rtxt1 ContextMenuTrip -> cms1 (2)截图&#xff1a; (3)完整代码&#xff1a; <span style"font-size:14px;">using System; using System.Collections.Generic; using System.ComponentModel; u…

设计模式学习笔记--Mediator 中介者模式

我们知道面向对象应用程序是由一组为了提供某种服务而彼此交互的对象组成。当彼此引用的对象数量比较少时&#xff0c;此时对象之间就为直接交互&#xff08;点对点)。而当对象的数量增加时&#xff0c;这种直接交互会导致对象之间复杂的、混乱的引用,最后形成一张巨大的网&…

Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

vee-validate 是为 Vue.js 量身打造的表单校验框架&#xff0c;允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则&#xff0c;可以组合使用多种校验规则&#xff0c;大部分场景只需要配置就能实现开箱即用&#xff0c;还支持自定义正则表达式。而且支…

Linux中fork()函数详解

参考地址 1.对fork函数的认识&#xff1a; 一个进程&#xff0c;包括代码、数据和分配给进程的资源。fork&#xff08;&#xff09;函数通过系统调用创建一个与原来进程几乎完全相同的进程&#xff0c; 也就是两个进程可以做完全相同的事&#xff0c;但如果初始参数或者传入的变…

Android学习之PopupWindow

Android的对话框有两种&#xff1a;PopupWindow和AlertDialog。 详细说明如下&#xff1a; AlertDialog是非阻塞式对话框&#xff1a;AlertDialog弹出时&#xff0c;后台还可以做事情&#xff1b; AlertDialog的位置固定&#xff0c;而PopupWindow的位置可以随意&#xff1b; A…

Programming C#.Classes and Objects.只读字段

只读字段 当字段声明中含有 readonly 修饰符时&#xff0c;该声明所引入的字段为只读字段。给只读字段的直接赋值只能作为声明的组成部分出现&#xff0c;或在同一类中的实例构造函数或静态构造函数中出现。&#xff08;在这些上下文中&#xff0c;只读字段可以被多次赋值。&am…

xgboost 一般多少棵树_大白话人工智能算法-第32节集成学习之通俗理解XGBoost原理和过程...

本节讲解XGBoost的原理~目录1、回顾&#xff1a;1.1 有监督学习中的相关概念1.2 回归树概念1.3 树的优点2、怎么训练模型&#xff1a;2.1 案例引入2.2 XGBoost目标函数求解3、XGBoost中正则项的显式表达4、如何生长一棵新的树&#xff1f;5、xgboost相比原始GBDT的优化&#xf…

css文件修改后没变化 static_Go Web编程使用Go语言创建静态文件服务器

上篇关于Go模板库应用实践的文章最后我们留下一个问题&#xff0c;页面模板是通过 CDN引用的 BootStrap的 css&#xff0c; js文件。到目前位置我们的服务器还无法伺服客户端的静态文件请求把服务器磁盘上的文件响应给客户端。使用和配置过 Nginx服务器的一定知道 Nginx天然支持…

【linux】学习2

鸟哥那本书的第6章 文件权限&#xff1a; ^ ^ ^ ^ ^ ^ ^ 1 2 3 4 5 6 7 文件有 文件所有者、文件所属用户组 的概念如上图. 1. 十个字母表示文件…

IE 8 开发人员工具详解 【转载】

我的体会&#xff0c;IE 8 较之前面的的版本还是有不少改进的。使用体验上好很多&#xff0c;速度也不错。IE 要继续加油&#xff0c; 对于网页开发人员&#xff0c;IE8也提供了一个所谓的开发人员工具&#xff0c;通过F12可以调用出来 关于这套工具的使用细节&#xff0c;我就…

scrollwidth ,clientwidth ,offsetwidth 三者的区别

clientwidth:内容可视区域的宽度 offsetwidth:元素整体宽度 scrollwidth:实际内容的宽度 转载于:https://www.cnblogs.com/cuijin-book/p/10760656.html

python运算符与表达式

2019独角兽企业重金招聘Python工程师标准>>> 运算符用于连接两个相同类型的序列&#xff0c;s*n用于创建一个序列的n个副本。但是这些都是仅仅复制元素引用的浅复制。 例&#xff1a; a[3,4,5] b[a] c2*b 则c[[3,4,5],[3,4,5]] a[0]-7; 则c[[-7,4,5],[-7,4,5]]. 也…

phper必知必会之类库自动加载的七种方式(三)

## php自动加载 下面显示例子的文件目录结构图 一、没有使用命名空间的几种实现 test/oneClass.php class oneClass{public function show(){echo "这里是oneClass.php的show方法<br/>";}} test/twoClass.php <?phpclass twoClass{public function show(){…

c++ 箭头符号怎么打_焊接图纸符号标注图解示例,焊接符号标注实例及方法

基本坡口符号坡口符号(注&#xff1a;图中“破”应为“坡”)焊接图纸符号标注图解示例焊接符号标注实例及方法在焊接结构图样上&#xff0c;焊接方法可按国家标准GB5185-85的规定用阿拉伯效字表示&#xff0c;标注在指引线的尾部。常用焊接方法代号见表3-9所示。如果是组合焊接…

演示: GTS流量×××和CAR流量监管的效果及相关实践计划

演示&#xff1a; GTS流量和CAR流量监管的效果及相关实践计划演示目标&#xff1a;1 理解clock rate(时钟频率)和bandwidth&#xff08;带宽&#xff09;与接入速率的关系2 在模拟运营商的接入路由器ISP上配置CAR监管用户流量到认购速率64K3 取证模拟的企业网络以128K的接入速率…

跨线程访问控件

【转帖】 我们在做winform应用的时候&#xff0c;大部分情况下都会碰到使用多线程控制界面上控件信息的问题。然而我们并不能用传统方法来做这个问题&#xff0c;下面我将详细的介绍。 首先来看传统方法&#xff1a; public partial class Form1 : Form { public Fo…