移动端适配viewport

2024-01-23 09:32
文章标签 移动 适配 viewport

本文主要是介绍移动端适配viewport,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、移动端适配基本概念
viewport 即视口
visual viewport 透过屏幕的可视区域 window.innerWidth
layout viewport 渲染页面的虚拟窗口

document.documentElement.clientWidth document.documentElement.clientHeight

二、viewport适配的核心概念

  1. 固定的layout viewport, -scale整体缩放
    例如对于分辨率为360像素的安卓设备,meta的view port 如下
<meta name="viewport" content="width=750,minimum-scale="0.48,maximum="0.48">
  1. 动态的layout viewport大小,内容布局自适应
<meta name="viewport" content="width=device-width,inital-scale=1.0,user-scalable=0">

三、平台类页面的适配(针对的是dom元素的适配)

  1. 荔枝FM:viewport固定大小,脚本设置动态缩放比例,布局字体等大小基本使用px单位
'<meta name="viewport" content="width=640,minimum-scale='+phoneScale+',maximum='+phoneScale+', target-densitydpi=device-dpi">'

缺点:无法满足大屏多字需求
2. 豆瓣:viewport动态大小,适配为设备屏幕可视区域

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,inital-scale=1.0,minimum=1.0,maximum=1.0">

利用百分比单位、px单位等混合实现流式布局
缺点:无法满足特殊场景需求

  1. 网易:viewport动态大小,适配为设备屏幕可视区域
    基本统一使用rem单位,实现弹性布局

  2. 手淘:根据dpr动态缩放viewport大小,实现一物理像素线
    缺点:脚本内联,导致css,js耦合。

scale=1/dpr
metaEl.setAttibute('content','initial-scale'+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no')

字体基本用px,布局大小用rem单位

四、基于viewport units(视口单位)的适配方案(相对于layout viewport)

1.概念
1vw: 视口宽度的1%大小
1vh:视口高度的1%大小
1vmax: 1vw和1vh中的最大值
1vmin: 1vw和1vh中的最小值
竖屏:100vw 100vmax
横屏: 100vw 100vmin
2.方案:视口单位+rem单位

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,shrink-to-fit=no">

对根元素的字体大小用vw单位

html{font-size:20px;font-size:375/20*100vw;@media screen and (max-width:320px){font-size:375/20*320px;}@media screen and (min-width:540px){font-size:375/20*540px;}
}

对横向全屏适配时,用vh单位

@media screen and (orientation:landscape){html{font-size:20px;font-size:375/20*100vh;}
}

rem单位根据基值进行计算

@function rem($val){@return $val/20;
}

1物理像素利用伪元素+border+scale属性实现

border:1px solid #ddd
top:0;bottom:0;left:0;right:0;
background:none;
border-color:$borderColor;
media only screen and (-webkit-min-device-pixel-ratio:2){&{right:-100%;bottom:-100%;-webkit-transform:scale(0.5);-webkit-transform-origin:0% 0%;}}

3.特色:视口单位+rem单位

以视口单位根元素大小单位,页面构建继续沿用rem单位方案

js css解耦、无缝切换继续使用rem构建、全面兼顾横屏适配、优雅降级利用px

五、营销类页面适配(sns游戏页面,针对canvas横屏适配)

1.核心思想:缩放》css3 transform 将canvas舞台缩放至适合的窗口大小来做横屏适配
2. 5种缩放适配模式
2.1 contain:舞台内容需要全屏展示,背景可用背景色铺满留空
2.2 cover:舞台主体内容居中,四周可以被裁减的游戏场景
2.3 fill:被拉伸变形不明显的游戏场景
2.4 fixed width:背景色铺满留空、又可被裁减
2.5 fixed height:横向延伸
3. 2种策略
3.1 重绘制:对应留白的情况,对重新绘制大小的元素进行处理
3.2 重定位:对应裁剪的情况,对于那些不希望被裁剪的贴边元素进行处理

这篇关于移动端适配viewport的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Python重命名文件并移动到对应文件夹

《Python重命名文件并移动到对应文件夹》在日常的文件管理和处理过程中,我们可能会遇到需要将文件整理到不同文件夹中的需求,下面我们就来看看如何使用Python实现重命名文件并移动到对应文件夹吧... 目录检查并删除空文件夹1. 基本需求2. 实现代码解析3. 代码解释4. 代码执行结果5. 总结方法补充在

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE

我在移动打工的日志

客户:给我搞一下录音 我:不会。不在服务范围。 客户:是不想吧 我:笑嘻嘻(气笑) 客户:小姑娘明明会,却欺负老人 我:笑嘻嘻 客户:那我交话费 我:手机号 客户:给我搞录音 我:不会。不懂。没搞过。 客户:那我交话费 我:手机号。这是电信的啊!!我这是中国移动!! 客户:我不管,我要充话费,充话费是你们的 我:可是这是移动!!中国移动!! 客户:我这是手机号 我:那又如何,这是移动!你是电信!!

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

简单的角色响应鼠标而移动

actor类 //处理移动距离,核心是找到角色坐标在世界坐标的向量的投影(x,y,z),然后在世界坐标中合成,此CC是在地面行走,所以Y轴投影始终置为0; using UnityEngine; using System.Collections; public class actor : MonoBehaviour { public float speed=0.1f; CharacterCo

物联网之流水LED灯、正常流水灯、反复流水灯、移动流水灯

MENU 硬件电路设计软件程序设计正常流水LED灯反复流水LED灯移动流水LED灯 硬件电路设计 材料名称数量直插式LED1kΩ电阻杜邦线(跳线)若干面包板1 每一个LED的正极与开发板一个GPIO引脚相连,并串联一个电阻,负极接GND。 当然也可以选择只使用一个电阻。 软件程序设计 正常流水LED灯 因为要用到多个GPIO引脚,所以最好把所有的GPI

12C 新特性,MOVE DATAFILE 在线移动 包括system, 附带改名 NID ,cdb_data_files视图坏了

ALTER DATABASE MOVE DATAFILE  可以改名 可以move file,全部一个命令。 resue 可以重用,keep好像不生效!!! system照移动不误-------- SQL> select file_name, status, online_status from dba_data_files where tablespace_name='SYSTEM'

《C++中的移动构造函数与移动赋值运算符:解锁高效编程的最佳实践》

在 C++的编程世界中,移动构造函数和移动赋值运算符是提升程序性能和效率的重要工具。理解并正确运用它们,可以让我们的代码更加高效、简洁和优雅。 一、引言 随着现代软件系统的日益复杂和对性能要求的不断提高,C++程序员需要不断探索新的技术和方法来优化代码。移动构造函数和移动赋值运算符的出现,为解决资源管理和性能优化问题提供了有力的手段。它们允许我们在不进行不必要的复制操作的情况下,高效地转移资源

鸿蒙开发5.0【Picker的受限权限适配方案】

Picker由系统独立进程实现,应用可以通过拉起Picker组件,用户在Picker上选择对应的资源(如图片、文档等),应用可以获取Picker返回的结果。 类型受限权限使用的picker音频ohos.permission.READ_AUDIO,ohos.permission.WRITE_AUDIOAudioViewPicker文件ohos.permission.READ_DOCUMENT,oh