【学习笔记】移动端浏览器的视口

news/2024/12/18 1:55:52/

两个视口

视觉视口:是当前显示屏页面中的一部分
布局视口:完整页面的大小

视觉视口
在这里插入图片描述

布局视口有多宽?这因浏览器而异。Safari iPhone使用980px, Opera 850px, Android WebKit 800px, IE 974px

视觉视口和布局视口相同
在这里插入图片描述

局视口宽度总是相同的。如果你旋转你的手机,可视视口会改变,但是浏览器会通过稍微放大来适应这个新的方向,这样布局视口就会再次和可视视口一样宽

这里是引用

测量布局视口

document.documentElement.clientWidth/clientHeight,测量布局视口尺寸

测量布局视口
在这里插入图片描述

测量视觉视口

window.innerWidth/innerHeight,测量视觉视口尺寸,当用户缩放时,该值会变化

视觉视口
在这里插入图片描述

不幸的是,这是一个不兼容的领域;许多浏览器仍然需要添加对可视视口测量的支持。

滚动偏移

window.pageX/YOffset,和桌面端一样

媒体查询

媒体查询和桌面端一样

Meta viewport

<meta name="viewport" content="width=320">

width,设置布局视口的宽度,有一个特殊的值:device-width。它将布局视口宽度设置为理想视口宽度
initial-scale,设置页面的初始缩放和布局视窗的宽度
minimum-scale,设置最小缩放级别(即用户可以缩小多少)
maximum-scale,设置最大缩放级别(即用户可以放大多少)。
height,应该设置布局视窗的高度
user-scalable,是否阻止用户缩放

假设您构建了一个简单的页面,并且元素没有宽度。现在它们伸展到布局视窗宽度的100%。大多数浏览器会缩小屏幕以显示整个布局视口,产生如下效果
在这里插入图片描述

所有用户都会立即放大,这是可行的,但大多数浏览器保持元素的宽度不变,这使得文本难以阅读。
在这里插入图片描述

理想视口

它提供了设备上网页的理想大小。因此,理想视口的尺寸因设备而异
在带有非视网膜屏幕的旧设备或廉价设备上,理想的视口等于物理像素数,但这不是必需的。具有更高物理像素密度的新设备可能会保留旧的理想视口,因为它非常适合设备

直到iPhone 4S, iPhone理想的视口是320x480,不管它是否有固定屏幕。这是因为320x480是iphone上网页的理想尺寸

布局视口可以设置为理想的视口值width=device-width和initial-scale=1设置就可以

所有的缩放指令都是相对于理想视口的,而不是布局视口的宽度。所以maximum-scale=3意味着最大变焦是理想视口的300%


http://www.ppmy.cn/news/1556011.html

相关文章

Servlet容器来扫描指定包中的类 找到带有WebServlet注解的类

项目框架如上图 myweb下边三个类 package com.qcby.tomcat.myweb;import com.qcby.tomcat.webServlet.WebServlet;WebServlet(urlPatterns {"MyFirstServlet"}) public class MyFirstServlet {}package com.qcby.tomcat.myweb;import com.qcby.tomcat.webServlet.W…

《数据结构之美-- 单链表》

引言&#xff1a; 首先由上次我们实现的顺序表聊起&#xff0c;我们在实现顺序表的时候会发现&#xff0c;在每次插入数据时当空间不够时就会涉及到扩容&#xff0c;而顺序表的扩容一般都是呈二倍的形式来进行&#xff0c;因此这就有可能造成空间的浪费&#xff0c;那该如何解…

计算机网络知识点全梳理(二.HTTP知识点总结)

目录 HTTP基本概念 HTTP优缺点 HTTP优点&#xff08;1.1&#xff09; HTTP缺点 HTTP与HTTPS HTTP 与 HTTPS 的区别 HTTPS 解决 HTTP 的哪些安全问题&#xff1f; HTTPS 如何解决安全问题&#xff1f; HTTPS 连接建立的过程&#xff1a; HTTP/1.1、HTTP/2、HTTP/3 演…

C++之一:基础

相关代码&#xff1a;cpp/month12/test_12/main.cpp Hera_Yc/bit_C_学习 - 码云 - 开源中国 C面向对象的语言 C兼容C&#xff1a;因此&#xff0c;C亦可以是面向过程的语言。 C的基础知识是特别碎的&#xff0c;但这并不意味着这些知识并不重要&#xff0c;这些碎片化的内容…

[Effective C++]条款33 继承, 重载与作用域

本文初发于 “天目中云的小站”&#xff0c;同步转载于此。 条款33 : 避免遮掩继承而来的名称 本条款并非和继承有关, 而是在讨论由继承引发的作用域问题, 其有可能破坏条款32所确定的法则, 因此我们在其之后介绍本条款。 我们知道在不同作用域下如果有相同名称的事物, 无论其功…

海康威视监控web实时预览解决方案

海康威视摄像头都试rtsp流&#xff0c;web页面无法加载播放&#xff0c;所以就得转换成web页面可以播放的hls、rtmp等数据流来播放。 一&#xff1a;萤石云 使用萤石云平台&#xff0c;把rtsp转化成ezopen协议&#xff0c;然后使用组件UIKit 最佳实践 萤石开放平台API文档 …

使用 imageio 库轻松处理图像与视频

使用 imageio 库轻松处理图像与视频 imageio 是一个 Python 库&#xff0c;用于读取和写入多种图像和视频格式。它功能强大、易于使用&#xff0c;广泛应用于图像处理、视频编辑和数据可视化等领域。本篇文章将介绍 imageio 的基础功能、常见用法以及高级操作。 一、安装 imag…

亚远景-ASPICE实施策略:构建高效汽车软件质量保证体系

ASPICE&#xff08;Automotive SPICE&#xff09;是一个针对汽车行业软件过程改进的国际标准&#xff0c;它旨在提高汽车软件的质量和可靠性。实施ASPICE通常需要一个系统性的策略&#xff0c;以下是一些关键的步骤和策略&#xff1a; 一、了解ASPICE 基本概念与要求&#xff…