【移动端】Viewport 视口

1. 什么是 Viewport(视口)?

Viewport(视口)是指浏览器中用户可见的那部分网页内容的区域,简单来说,它是用户当前看到的网页的“窗口”区域。在不同的设备上,Viewport 的大小会有所不同。

  • 在桌面设备上,Viewport 通常和浏览器窗口的大小一致。
  • 在移动设备上,Viewport 是屏幕的可视区域。

2. 视口的分类

根据不同的设备,视口可以分为三种类型:

(1)Layout Viewport(布局视口)

布局视口 是浏览器用于布局网页内容的虚拟视口。对于桌面浏览器,布局视口的宽度通常等于浏览器窗口的宽度。但在移动设备上,为了避免网页内容在小屏幕上被压缩得过小,浏览器会默认提供一个比屏幕宽得多的布局视口(一般在 980px 左右),以确保桌面版网页在手机上看起来不会太窄。

特点:

  • 这是网页最初布局时所使用的虚拟宽度,浏览器根据这个宽度来排布元素。
  • 在移动设备上,布局视口的宽度通常远大于屏幕的实际宽度,以模拟桌面设备的显示效果。

问题:

  • 一般来说,如果不指定特殊的 Viewport 设置,网页在移动设备上可能会显示得非常小,需要用户手动缩放。

(2)Visual Viewport(视觉视口)

视觉视口 是用户实际可见的网页区域。这是用户当前看到的网页部分,不包括缩放和滚动后的页面之外的区域。视觉视口会随着缩放和滚动而改变。

特点:

  • 视觉视口随着缩放而动态变化,缩放时视觉视口会变小(放大页面)或变大(缩小页面)。
  • 它是用户当前在屏幕上看到的区域,与用户的视图相关。

(3)Ideal Viewport(理想视口)

理想视口 是指与设备的物理分辨率和尺寸完美匹配的视口。它提供了在设备屏幕上适合用户阅读的最佳尺寸,而无需缩放。在响应式设计中,开发者通过指定理想视口,可以确保网页在不同设备上看起来合适。

特点:

  • 理想视口通常通过 meta 标签设置,能够让网页根据设备宽度调整内容,使其无论在大屏幕还是小屏幕设备上都能适应。

3. Viewport 相关属性

在移动端中,默认是 Layout Viewport ,为了得到 Ideal Viewport ,开发者可以通过 <meta> 标签的 viewport 属性来控制网页的视口行为,特别是在移动设备上。

常见的 meta viewport 属性及其含义:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  • width
    指定布局视口的宽度,可以设置为一个具体的数值(如 width=1024)或 device-width,表示与设备屏幕宽度一致。

    • width=device-width:将视口宽度设置为设备的实际宽度,这是移动设备上响应式设计的常用设置。
  • initial-scale
    设置页面的初始缩放比例,1.0 表示以 100% 的缩放比例显示页面内容。

    • initial-scale=1.0:页面以 1:1 的比例显示,即不缩放。
  • maximum-scale
    设置用户可缩放到的最大比例。

    • maximum-scale=2.0:用户可以将页面缩放到最多 2 倍的大小。
  • minimum-scale
    设置用户可缩放到的最小比例。

    • minimum-scale=0.5:用户可以将页面缩放到最多一半大小。
  • user-scalable
    决定用户是否可以手动缩放页面。

    • user-scalable=no:禁止用户手动缩放页面。
    • user-scalable=yes:允许用户手动缩放页面。

4. Viewport 缩放

缩放指的是用户在浏览器中通过手势或浏览器缩放功能,将网页的内容放大或缩小。缩放与 视觉视口 密切相关,因为缩放操作会改变用户当前看到的区域。

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

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

相关文章

【SVN】一文读懂Subversion(SVN)

SVN 一、SVN简介1. 概念1.1 repository&#xff08;源代码库&#xff09;1.2 Checkout&#xff08;提取&#xff09;1.3 Commit&#xff08;提交&#xff09;1.4 Update (更新) 2. SVN的主要功能2.1 目录版本控制2.2 真实的版本历史2.3 自动提交2.4 纳入版本控管的元数据2.5 选…

MoveIt2-humble----Planning Around Objects

1 添加Planning Scene Interface头文件 #include <moveit/planning_scene_interface/planning_scene_interface.h>2 改变目标位姿 // Set a target Pose auto const target_pose [] {geometry_msgs::msg::Pose msg;msg.orientation.w 1.0;msg.position.x 0.28;msg.p…

Github 2024-10-06 php开源项目日报 Top10

根据Github Trendings的统计,今日(2024-10-06统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目10Blade项目2Laravel:表达力和优雅的 Web 应用程序框架 创建周期:4631 天开发语言:PHP, BladeStar数量:75969 个Fork数量:24281 次…

Linux安装部署MySQL8.0加遇着问题解决

1.首先我先给个URL下载MySQL官方网站https://downloads.mysql.com/archives/community/ 2.选择Linux的红帽系统 3.接着选择红帽系统的7版本,x86 4.接着选择MySQL版本,此时我选择8.4.0,下载rpm bundle这个,下载下面这个就好 5.Windows文件上传到Linux系统 rz上传文件命令,找到…

【unity游戏开发】彻底理解AnimatorStateInfo,获取真实动画长度

前言 前置知识&#xff1a;设置参数后&#xff0c;下一个循环才会切换对应动画&#xff0c;所以在下一个循环获取真实的动画长度 AnimatorStateInfo是结构体&#xff01;值类型&#xff0c;要不断重复获取才是最新的 主要是自动设置trigger切换的动画自动切回上一个动画&#x…

Java中如何实现定时任务?

目录 一、定时任务 概念 作用 二、简单定时任务实现方式 1. Thread线程等待&#xff08;最原始最简单方式&#xff09; 2. 使用java.util.Timer Timer 优缺点分析 3. 使用JDK自带的ScheduledExecutorService schedule和scheduleAtFixedRate的区别 schedule侧重保持间隔…

高级java每日一道面试题-2024年10月5日-数据库篇[MySQL篇]-Mysql是如何回滚事务的?

如果有遗漏,评论区告诉我进行补充 面试官: Mysql是如何回滚事务的? 我回答: 在MySQL中&#xff0c;事务回滚是一个重要的机制&#xff0c;用于在发生错误或异常时撤销所有未提交的更改&#xff0c;确保数据库的一致性和完整性。事务回滚的过程涉及多个内部机制和数据结构&a…

B 私域模式升级:开源技术助力传统经销体系转型

一、引言 1.1 研究背景 随着市场竞争加剧&#xff0c;传统经销代理体系面临挑战。同时&#xff0c;开源技术发展迅速&#xff0c;为 B 私域升级带来新机遇。在当今数字化时代&#xff0c;企业面临着日益激烈的市场竞争。传统的经销代理体系由于管理效率低下、渠道局限、库存压…

贝锐蒲公英网盘首发,秒建私有云,高速远程访问

虽然公共网盘带来了不少便利&#xff0c;但是大家对隐私泄露和重要数据泄密的担忧也随之增加。如果想要确保数据安全&#xff0c;自建私有云似乎是一条出路&#xff0c;然而面对搭建私有云的复杂步骤&#xff0c;许多人感到力不从心&#xff0c;NAS设备的成本也往往让人望而却步…

项目——超级马里奥——Day(2)

争取今天晚上能搞一半啊&#xff0c;啊啊啊啊&#xff0c;感觉事多的忙不过来 设计思路&#xff1a; 1&#xff09;创建并完成常量类 ------->一张图片的情况 先完成对图片的封装------>把图片加载一遍 &#xff08;老实说&#xff0c;我也不太知道为什么&#xff0…

【项目安全设计】软件系统安全设计规范和标准(doc原件)

1.1安全建设原则 1.2 安全管理体系 1.3 安全管理规范 1.4 数据安全保障措施 1.4.1 数据库安全保障 1.4.2 操作系统安全保障 1.4.3 病毒防治 1.5安全保障措施 1.5.1实名认证保障 1.5.2 接口安全保障 1.5.3 加密传输保障 1.5.4终端安全保障 资料获取&#xff1a;私信或者进主页。…

约数个数约数之和

好久没发文章了.......不过粉丝还是一个没少...... 今天来看两道超级恶心的数论题目&#xff01; No.1 约数个数 No.2 约数之和 先来看第一道&#xff1a;约数个数 题目描述 给定 n 个正整数 ai​,请你输出这些数的乘积的约数个数,答案对 10^97 取模 输入格式 第一行包含…

OBOO鸥柏丨OLED透明触摸查询一体机数字科技触控广告屏技术前沿

吊挂透明OLED触摸屏一体机正成为博物馆数字化展示的“共同奔赴赛道选择&#xff0c;透过透明屏幕看到展示物品的内部结构和细节&#xff0c;GG纯平面触控实现展示查询交互与互动的完美结合。相比传统的商用/工业液晶显示屏机柜&#xff0c;OLED透明触摸屏具有更高的对比度和更广…

佳易王电玩店ps5计时计费系统软件倒计时语音提醒软件操作教程

一、前言 【试用版软件下载可以点击最下方官网卡片】 佳易王电玩店ps5计时计费系统软件倒计时语音提醒软件操作教程 1、时间显示&#xff1a;正常使用时间&#xff0c;直观显示在对应桌旁。 2、倒计时显示&#xff1a;右侧显示剩余多少分钟&#xff0c; 3、定时语音提醒&am…

进入xwindows后系统挂起(黑屏)键盘鼠标没有响应@FreeBSD

问题&#xff1a;黑屏能看见鼠标&#xff0c;键盘和鼠标没有反应 在不小心升级pkg包后&#xff0c;系统无法进入xfce等xwindows&#xff0c;表现为黑屏和能看见鼠标&#xff0c;左上角有一个白字符块&#xff0c;键盘鼠标没有反应&#xff0c;整个系统卡住。但是可以ssh登录&a…

MongoDB的查询/超详细

1.查询的基本格式 查询参数1集合的所有数据. 参数1为您要查询的集合名称 //查询所有 db.参数1.find() 例子 查询student集合下的所有数据 db.student.find() 2.带条件的查询 查询满足参数2&#xff1a;“参数3”这样key&#xff1a;“velu”形式的数据 参数1&#xff1a;目…

阿里云域名注册购买和备案

文章目录 1、阿里云首页搜索 域名注册2、点击 控制台3、域名控制台 1、阿里云首页搜索 域名注册 2、点击 控制台 3、域名控制台

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件 1.AJAX入门与体验axios 定义&#xff1a;浏览器与服务器进行数据通信的技术 体验axios库&#xff0c;与服务器通信 引入axios.js使用axios函数 <p class"my-p"></p&…

SQL中如何进行 ‘’撤销‘’ 操作-详解

在 SQL 中&#xff0c;撤销已经执行的操作通常涉及两个主要的概念&#xff1a;事务控制和回滚操作。 ### 1. 事务控制 在支持事务的数据库管理系统&#xff08;如 MySQL 的 InnoDB 引擎&#xff09;中&#xff0c;您可以使用事务来确保数据的完整性。事务可以确保一系列的操作…

YOLOv11改进,YOLOv11添加DCNv4可变性卷积(windows系统成功编译),二次创新C2f结构,全网最详细教程

改进训练结果前: 二次创新C2f结构训练结果: 摘要 引入了可变形卷积 v4 (DCNv4),这是一种为广泛视觉应用设计的高效且有效的操作算子。DCNv4通过两项关键增强解决了其前身DCNv3的局限性:1. 移除空间聚合中的softmax归一化,以增强其动态特性和表达能力;2. 优化内存访问以…