- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
而 <meta name="viewport">
标签是非标准化的,它“由于事实上的主导地位而受到大多数移动浏览器的尊重”。
它不是真正的 Web 标准的一个缺点是详细的文档不像其他标准那样可用。 CSS Working Group对此有一个规范,所以这就是我主要用作权威工作的内容。
我的主要问题是:
以下声明之间的感知差异是什么?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1.0">
/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
zoom: 1.0;
min-width: extend-to-zoom;
max-width: 100vw;
}
/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
zoom: 1.0;
min-width: extend-to-zoom;
max-width: extend-to-zoom;
}
@viewport
翻译:
width=device-width
至
min-width: extend-to-zoom; max-width: 100vw;
The
width
andheight
viewport<META>
properties are translated intowidth
andheight
descriptors, setting themin-width
/min-height
value toextend-to-zoom
and themax-width
/max-height
value to the length from the viewport.
This
<META>
element:<meta name="viewport" content="width=500, height=600">
translates into:
@viewport {
width: extend-to-zoom 500px;
height: extend-to-zoom 600px;
}
width
shorthand descriptor被描述为:
This is a shorthand descriptor for setting both
min-width
andmax-width
. One<viewport-length>
value will set bothmin-width
andmax-width
to that value. Two<viewport-length>
values will setmin-width
to the first andmax-width
to the second.
width: extend-to-zoom 500px;
相当于
min-width: extend-to-zoom; max-width: 500px;
.
100vw
部分。内
section 10.4 ,他们解释说:
device-width
anddevice-height
translate to 100vw and 100vh respectively
width=device-width
翻译成
min-width: extend-to-zoom; max-width: 100vw;
.
initial-scale=1.0
至
zoom: 1.0; width: extend-to-zoom;
This
<META>
element:<meta name="viewport" content="initial-scale=1.0">
translates into:
@viewport {
zoom: 1.0;
width: extend-to-zoom;
}
extend-to-zoom
究竟是什么?值(value)?
最佳答案
在我们深入研究您的问题之前,让我们回顾一下为什么 viewport
元标记首先存在。这是我收集的。
为什么我们需要viewport
标签?
视口(viewport)是可以看到 Web 内容的区域。通常,呈现的页面(网页内容)比视口(viewport)大。因此,我们通常使用滚动条来查看隐藏的内容(因为视口(viewport)无法显示所有内容)。 Quoted from CSS Device Adaptation Module Level 1 :
The narrow viewport is a problem for documents designed to look good in desktop browsers. The result is that mobile browser vendors use a fixed initial containing block size that is different from the viewport size, and close to that of a typical desktop browser window. In addition to scrolling or panning, zooming is often used to change between an overview of the document and zoom in on particular areas of the document to read and interact with.
640px
的移动设备可能有一个初始包含块
980px
.在这种情况下,初始包含块缩小为
640px
以便它可以适合移动屏幕。此
640px
宽度(屏幕宽度)就是所谓的
initial-width
与我们的讨论相关的视口(viewport)。
viewport
标签?好吧,现在,我们有
media queries这使我们能够为移动设备进行设计。但是,此媒体查询依赖于
实际视口(viewport)的宽度。在移动设备中,用户代理会自动将初始视口(viewport)大小设置为不同的固定大小(通常大于初始视口(viewport)大小)。因此,如果移动设备的视口(viewport)宽度是固定的,那么我们在媒体查询中使用的 CSS 规则将不会执行,因为视口(viewport)的宽度永远不会改变。使用
viewport
标签,我们可以控制
实际视口(viewport)的宽度(由 UA 设置样式后)。
Quoted from MDN :
However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.
viewport
标签也可以改变实际视口(viewport)的高度,而不仅仅是宽度
viewport
标签
width
width
在
viewport
标签被翻译成
max-width
在
@viewport
规则。当您声明
width
如
device-width
,翻译成
100%
在
@viewport
规则。
Percentage value基于
initial-width
解决的视口(viewport)。所以如果我们仍然使用上面的例子,
max-width
将解析为
640px
的值.正如您所发现的,这仅指定了
max-width
.
min-width
将自动为
extend-to-zoom
.
extend-to-zoom
max-zoom
UA 样式表的值为
5.0
和
initial-width
是
320px
,
<meta name="viewport" content="width=10">
将解析为
64px
的初始实际宽度.这是有道理的,因为如果设备只有 320px 并且只能缩放
5x
正常值,那么最小视口(viewport)大小将为
320px divided by 5
,这意味着一次只显示 64 像素(
而不是
10px
因为这需要放大 32 倍!)。算法将使用此值来确定如何扩展(更改)
min-width
和
max-width
值,这将在确定实际视口(viewport)宽度方面发挥作用。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
之间有什么区别?和
<meta name="viewport" content="initial-scale=1.0">
?只需重做算法的步骤(
this 和
this )。让我们先做后者(没有
width
属性的那个)。 (我们假设视口(viewport)的
initial-width
是
640px
。)
width
未设置,这会导致 max-width
和 min-width
正在 extend-to-zoom
在 @viewport
规则。 initial-scale
是 1.0
.这意味着 zoom
值也是 1.0
extend-to-zoom
.步骤:extend-zoom = MIN(zoom, max-zoom)
. MIN
操作解析为非 auto
的值.在这里,zoom
是 1.0
和 max-zoom
是 auto
.这意味着 extend-zoom
是 1.0
extend-width = initial-width / extend-zoom
.这很简单; 640 除以 1。你得到 extend-width
等于 640
extend-zoom
是非 auto
,我们将跳到第二个条件。 max-width
确实是extend-to-zoom
,这意味着 max-width
将设置为 extend-width
.因此,max-width = 640
min-width
也是extend-to-zoom
,这意味着设置 min-width
至 max-width
.我们得到 min-width = 640
auto
(即 extend-to-zoom
)值 max-width
和 min-width
.我们可以继续到the next procedure .因为 min-width
或 max-width
不是 auto
,我们将使用第一个 if
在程序中,从而设置初始实际视口(viewport)width
至 MAX(min-width, MIN(max-width, initial-width))
,相当于 MAX(640, MIN(640, 640))
.这解析为 640
用于您的初始实际视口(viewport) width
width
不是 auto
.值没有改变,我们最终得到了实际的视口(viewport) width
的 640px
width
设置,这将导致 max-width
正在 100%
(在我们的例子中是 640px
)和 min-width
正在 extend-to-zoom
在 @viewport
规则。 initial-scale
是 1.0
.这意味着 zoom
值也是 1.0
extend-to-zoom
.如果你仔细地按照步骤操作(几乎和上面一样),你最终会得到一个 max-width
的 640px
和一个 min-width
的 640px
. 640px
的实际视口(viewport)宽度. 关于css - 当还设置了 "width=device-width"时,从视口(viewport)元标记中删除 "initial-scale=1.0"的副作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61238548/
我想了解这两者的区别 谢谢 最大宽度:100px 宽度:100px body{ max-width: 1080px; width: 1080px; backgrou
jQuery 的 .width()、jQuery 的 .css('width') 和 .style 返回的值有什么区别.width 节点上的属性? 我很好奇,因为在尝试将两个表格单元格的宽度设置为相等
我可以在 wordpress 的 header php 中添加两个视口(viewport): 和 我希望能够使用 viewport width 1024 显示everything,除非您是低于 x
好的,所以我得到了 ImageBackground 的以下组件(使用 typescript ,但应该是不言自明的)。 (这是 react 原生的) import * as React from "re
我正在尝试根据 div 中包含的图像的宽度调整其大小,但没有任何 JS 方法可以一致地工作来获取图像的宽度。 label here img { width: auto
我有一个表,我试图找到表中每个 td 的宽度。我尝试了各种变体:$("td")[0].width(),但它们都不起作用,收到错误:"Uncaught TypeError: $ (...)[0].wid
我在使 rem 中的 min-width 与百分比宽度共存时遇到了一些问题。 When resizing this jsfiddle the outer right block is going un
当我在 chrome(以及 Edge/Brave/Opera)的设备模式下测试页面时,设备宽度属性似乎减少了,但宽度属性没有 重新创建: html {
我想依次显示 div #botone、#bottwo 和 #bottree。我还希望在 #botone div 上按 100% 宽度和比例高度调整背景图像。 现在最后两个 Div 显示在 #boton
我是第一次学习 JavaScript 的学生,我有一个学校问题,我们需要指出 width 和 style.width 接受的数据类型。 我知道数据类型有数字、字符串、空值、未定义、 bool 值和对象
所以看起来在移动设备中媒体查询使用 screen.width 根本没有改变。但是在我的桌面上,当我更改窗口大小时,screen.width 保持不变,$(window).width() 发生变化,并且
http://jsfiddle.net/3BFGU/27/ 有谁知道为什么包含文本“ABC”的跨度的宽度返回 0。 1) 仅在 Firefox 中发生。2)如果我删除两者之间的跨度,它工作正常。 (h
我知道下面的代码清除了 Canvas canvas.width = canvas.width 但这在内部是如何工作的呢? 赋值运算符只是将一些值赋给变量,但是上面的代码如何清除 Canvas ? 根据
当使用 max-width 时,为什么它不会“破坏”超过允许长度的单词,我该如何让它工作? JSFiddle function input() { var inputText = document
在移动网站上,在利用 width=device-width 视口(viewport)设置的同时调整文本大小的最佳方式是什么? 最佳答案 样式百分比如何?比如 100% 或 90%。 关于html -
对于我的 WPF Toolkit DataGrid,我使用以下自定义列标题样式:
过去,我看到下一个 css,我在想两者之间是否存在一些实际差异 min-width: 90px; max-width: 90px; 和 width: 90px; 最佳答案 使用 width 将简单地在
我有一个 R Markdown,我从 RStudio 中将其编织为 html。我可以使用 fig.width 和 fig.height 来调整我的绘图的分辨率,但我似乎无法加宽页面输出,以便文本输出不
此处的示例代码:http://pastebin.com/95z3pftQ 我正在尝试构建一个带有固定标题和“内容”部分的移动页面,该部分将填充外部(经过清理,但在其他方面是任意的)HTML。我需要使用
这里是 dp 单位的定义:(如果它是正确的...) 密度无关像素 - 一种基于屏幕物理密度的抽象单位。这些单位是相对于 160 dpi 屏幕而言的,因此 1 dp 是 160 dpi 屏幕上的一个像素
我是一名优秀的程序员,十分优秀!