viewport视口

最新推荐文章于 2022-09-09 20:07:22 发布

原创最新推荐文章于 2022-09-09 20:07:22 发布 · 487 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#viewport视口

H5学习专栏收录该内容

17 篇文章

订阅专栏

viewport视口

每次在写代码时,都会用vscode生成html代码时,都会有一句

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段是viewport视口设置,如果没有的话手机浏览网页就会自动缩放文本,设置之后你写的网页就会原原本本的显示出来

比较官方一点的说明是:默认情况下，移动端浏览器打开网页时为了显示全部内容，会将页面进行缩小，如果一个网页是专门针对移动端设计的页面，不需要让浏览器缩小，则需要进行viewport设置，将with设置为device-width,initial-scale=1.0.

另外还有userscalable=no设置网页不可缩放(一般应该不需要吧)如:

<meta name="viewport" content="width=device-width, initial-scale=1.0,userscalable=no">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunset0827

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

viewport 视口与窗口逻辑坐标设备坐标

02-18

viewport 视口窗口 GDI 坐标映射方式定义了Windows如何将GDI函数中指定的逻辑坐标映射为设备坐标。 Windows有关映射模式的一些术语：逻辑坐标所在的坐标系称为"窗口"，将设备坐标所在的坐标系称为"视口"。

精选资源

vue-in-viewport-directive:Vue 2指令，当元素是视口时添加CSS类

04-28

in-viewport -元素的某些部分在视口内 above-viewport -元素的某些部分在视口上方 below-viewport -元素的某些部分在视口下方您可能要签出此软件包的mixin版本：。演示：：用法注意，这不应应用于通过Vue...

参与评论您还未登录，请先登录后发表或查看评论

viewport 视口

weixin_45463061的博客

09-09

727

viewport 视口

视口viewport

weixin_30607659的博客

09-11

223

一、viewport 1. 何为视口？视口是浏览器显示网页的矩形区域。 2. 默认视口：模拟一个大约1000像素宽的视口。理想视口：因设备、操作系统、浏览器而异，一般而言，手机宽带大约在300～500像素之间（iphone 5宽度320像素），平板宽度在800～1400像素可见视口：浏览器窗口减掉所有按钮、工作条、滚动条等组件之后，实际包含网页内容的空间。布局视口：放大...

34. 视口 viewport

potato123232的博客

07-11

305

视口是浏览器显示页面内容的屏幕区域，我们以京东为例，京东的页面是非常长的只有我当前显示出来的部分叫做视口（可以理解为可视区域）视口可以分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口（idel viewport）由于移动端的网页对高度要求是不大的，因为你上下滑动这个动作比较方便（而左右移动却不是很方便）。所以我们后续都使用宽度来解释视口目录1 布局视口2 视觉视口3 理想视口4 meta视口标签布局视口就是你整体网页的宽度如果你的布局视口远超手机

viewport、布局视口、视觉视口、理想视口深入理解

codest的专栏

07-27

727

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视

视口（viewport）相关概念（一）

陈开心的博客

11-20

2270

这系列文章将解释视口和各种重要元素的宽度是如何工作的，比如<html>元素，以及窗口和屏幕。（how viewports and the widths of various important elements work, such as the element, as well as the window and the screen.）概念：设备像素和CSS像素（device...

Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip

05-23

"移动端之viewport视口"是一个关键的概念，它直接影响着移动设备上的网页展示效果。本节内容将深入探讨这个概念以及如何通过HTML和CSS优化移动端布局。 1. **什么是Viewport视口** 视口（Viewport）是移动浏览器...

CSS第九章移动端布局-Viewport视口/移动端适配方案

晓葉斑比

06-04

2151

Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器切换平台之后，一定要重新刷新浏览器访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检

PyQt(Python+Qt)学习随笔：QAbstractScrollArea的viewPort(视口）理解.rar

09-16

本学习随笔主要探讨的是QAbstractScrollArea中的一个核心概念——`viewPort()`，即视口。视口是用户在界面上实际看到和交互的部分，它决定了用户可以看到哪些内容以及如何滚动来查看其他内容。首先，我们来理解...

ViewPort的作用

地铁和人海

08-25

516

https://blog.youkuaiyun.com/u012402190/article/details/70172371

响应式布局——视口viewport和常用单位

weixin_51081257的博客

11-25

3452

了解一下响应式布局视口和视口常用单位

关于viewport的一点自学

liyidong2014的博客

09-19

1219

准备前端笔试，看到这样一题：针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？表示有阵子没编程了居然给忘了！故迅速查了viewport的相关内容，现理解如下： viewport是指移动设备屏幕上显示网页的那一块区域，而网页本身可比移动端屏幕（或浏览器屏幕）大，也可比之小。由此，为了更好把PC端网页

视口概念viewport

weixin_43786904的博客

02-13

824

1.视口概念描述：视口就是视图窗口的简称，页面中视口大小实际上就是HTML元素的显示大小。说明：页面想要在移动端加载必须进行视口的适配，如果不对页面进行调整，那么默认页面在移动端加载的时候，都认为页面视口宽度为980px。 2.解决方案描述：说明： (1)只要做移动端适配，就对页面添加此标签，此标签能够使得页面不在按照980px进行加载。 (2)必要内容： width=device-w...

窗口window 和视口 viewport 恐龙平铺源代码

haimian520的专栏

10-24

778

ViewPort视口

diaoguoluo8675的博客

08-19

159

一个典型的针对移动端优化的页面会包含类似这样的内容：　　<meta name="viewport" content="width=device-width, initial-scale=1.0, 　　maximum-scale=1.0, user-scalable=no"> 　　其中的name="viewport"中的viewport我们称作视口常说的viewp...

移动端开发总结（一）视口viewport总结

lamanchas的博客

11-07

3196

转载链接：移动端开发中，关于适配问题的一点总结(一)视口布局视口layout viewport 视觉视口visual viewport 理想视口缩放一个重大区别最小缩放和最大缩放分辨率物理分辨率dpi 设备像素比 dpr dipsdevice-independent pixels meta视口完美的meta 视口

HTML meta中的viewport指令详解

lzssing-GG的博客

02-15

591

在手机HTML网页源代码中经常如下的一行代码：这行代码是用来做什么的呢？这就要了解什么是“viewport”了。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。读到这里，我们可以大概

css 视口

最新发布

08-27

### CSS 视口单位（Viewport Units）和相关属性 CSS 中的视口单位是一种基于浏览器视口大小的相对单位，适用于响应式设计。它们包括 `vw`、`vh`、`vmin` 和 `vmax`。 - **`vw`（viewport width）**：1vw 等于视口宽度的 1%。例如，如果视口宽度为 1000px，则 1vw 等于 10px。 ```css .element { font-size: 5vw; /* 字体大小为视口宽度的5% */ } ``` - **`vh`（viewport height）**：1vh 等于视口高度的 1%。例如，如果视口高度为 800px，则 1vh 等于 8px[^1]。 ```css .element { height: 50vh; /* 元素高度为视口高度的50% */ } ``` - **`vmin`（viewport minimum）**：1vmin 等于视口宽度和高度中较小值的 1%。例如，如果视口宽度为 400px，高度为 800px，则 1vmin 等于 4px[^1]。 ```css .element { width: 20vmin; /* 元素宽度为视口较小边的20% */ } ``` - **`vmax`（viewport maximum）**：1vmax 等于视口宽度和高度中较大值的 1%。例如，如果视口宽度为 400px，高度为 800px，则 1vmax 等于 8px[^1]。 ```css .element { height: 30vmax; /* 元素高度为视口较大边的30% */ } ``` 此外，CSS 还提供了一些与视口相关的属性，例如 `@viewport` 和 `meta viewport` 标签： - **`@viewport`**：用于控制视口的行为，尤其在移动设备上。它允许设置视口的宽度、缩放比例等。 ```css @viewport { width: device-width; zoom: 1.0; } ``` - **`<meta viewport>`**：在 HTML 中定义视口的行为，通常用于移动设备优化。 ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 这些视口单位和属性可以帮助开发者创建更具响应性的布局，尤其是在不同设备和屏幕尺寸上[^1]。 ### 视口单位的应用场景 - **全屏布局**：使用 `vh` 和 `vw` 可以轻松创建全屏元素，例如全屏背景或标题。 - **响应式字体大小**：通过 `vw` 单位调整字体大小，使文字在不同屏幕尺寸下保持合适的比例。 - **动态高度和宽度**：根据视口大小调整元素的尺寸，确保布局的灵活性和适应性。 ### 示例代码以下是一个使用视口单位的简单示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .full-screen { height: 100vh; width: 100vw; background-color: lightblue; display: flex; justify-content: center; align-items: center; font-size: 5vw; } </style> </head> <body> <div class="full-screen">Hello, Viewport!</div> </body> </html> ``` 在这个示例中，`.full-screen` 类使用 `vh` 和 `vw` 单位来确保元素始终占据整个视口，并且字体大小根据视口宽度进行调整。