问题标签 [viewport-units]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 视口单元字体大小和缩放错误：哪些浏览器受到影响？
当缩放级别未设置为 100% 时，桌面 IE10 似乎无法正确缩放以视口单位设置其字体大小的文本。我试图找出受此影响的 IE 版本（可能还有其他浏览器）。请在您的浏览器中尝试此示例并报告您的发现：
css - 为什么 calc 在用于字体大小时不会重新评估？
我尝试将 VW 和 calc 一起使用并且可以工作，但只计算了一次：加载时间：
http://codepen.io/anon/pen/mJOGbr
如何在调整浏览器窗口大小时强制评估该计算？它被评估一次，但不再被评估。没有 calc，VM 可以正常工作...
提前致谢！
javascript - 使用 JavaScript/JQuery 在页面加载时将相对/视口大小转换为固定大小
希望你今天过得愉快。我目前正在开发一个网站，其中几乎所有的测量值（字体大小、填充、边距、宽度、高度等）都是使用视口单位 vw 和 vh 进行的。
我使用这些单位是因为它们最能使页面在不同的屏幕分辨率上看起来像我想要的，与像素大小不同。
我想知道是否有可能，是在页面加载后，获取所有这些测量值的非相对值（例如，如果我说 1vw，而我的屏幕是 1000px，那么非相对值应该是 10px）和用那些替换我的css3工作表上的相对值。这听起来可能很荒谬，但我的观点是允许用户放大和缩小页面，并让事物实际放大或缩小。目前，无论用户进行何种缩放，页面都保持不变，除了我拥有的重复图像。
我想在 javascript 中执行此操作，因为由于我的 java 起源，它是我最了解 html 客户端脚本的语言。
或者，也许有一个我不知道的功能在放大时会忽略相对值？如果是这样，请告诉我。
html - iPhone文本位置问题
您好，对于可能遇到的愚蠢问题，我深表歉意，因为我对 HTML 和 CSS 还很陌生。如果可能的话，我想避免使用 Javascript 来解决这个问题。
我的问题是文本“仍在处理中”。在测试的各种笔记本电脑/台式机屏幕和安卓手机上，我对它没有任何问题，整个文本字段都居中。但是在iphone上，我假设它将字符串“S”的第一个字母居中？以下是它在 iphone 设备上的外观示例：
下面分别是我的 HTML 和 CSS 代码，如果有人能指导我正确的方向来解决这个问题，我将非常感激。
和
该网站是： https ://eliasmalik.com
css - CSS 单位 - vh/vw 和 % 有什么区别？
我刚刚了解了一个新的和不常见的 CSS 单元。vh并vw分别测量视口的高度和宽度的百分比。
我从 Stack Overflow 上查看了这个问题，但它使单位看起来更加相似。
答案具体说
vw 和 vh 分别是窗口宽度和高度的百分比：100vw 是宽度的 100%，80vw 是 80%，以此类推。
%这似乎与更常见的单位完全相同。
在开发人员工具中，我尝试将值从 vw/vh 更改为 %，反之亦然，得到了相同的结果。
两者有区别吗？如果不是，为什么要引入这些新单位CSS3？
html - 在视口单位中设置父级高度时变换不起作用
我在垂直居中时遇到问题。的header高度为100vh，其子元素 ,site-info的高度未指定。该site-info元素应该垂直居中在header.
我已经尝试了标准transform:translateY解决方案，但它不起作用。Top:50%确实有效，但就像transform没有发生一样。我可以通过 FireBug 看到该transform属性已附加到site-info，但没有任何反应。
我也尝试过使用vertical-align: centeronsite-info没有成功，并使用一些position:absolute解决方案header使其完全消失。使用position:absoluteonsite-info也无济于事。
HTML：
CSS：
css - 使用“vw”获取 100% 宽度的标题
我有一个 h1 我想适应视口的整个宽度，它由等宽字体的13 个字符组成。在阅读了关于视口大小排版的CSS-Tricks文章之后，如果我想实现这一点，我只需将 h1 的样式设置为：
然而，这会留下一些空间（突出显示文本以查看空白）：
（这里会有一张图片，但我没有足够的代表，所以点击这里查看 JSFiddle）
我试过其他尺寸，font-size: 14vw;有点偏大，font-size: 13.99vw;看起来刚刚好，但奇怪font-size: 13.999vw;的是还是太大了？
有人可以解释这里发生了什么吗？为什么等宽字体中 13 个字符长度的字符串中的每个字符都需要超过(100/13)% 的视口宽度才能适应整个视口宽度？
javascript - 带有 img 标签的 Internet Explorer 视口宽度单位错误
所以我做了一个页面介绍，其中有 svg 文件，其中一个是彩色的，另一个是仅概述的。该图有一个隐藏的溢出，它有一个动画来增加它的宽度。像这样的东西：
它在所有浏览器上看起来都不错，但 IE 我一直在玩所有容器的宽度，但我无法让它适应并使其响应。任何想法 ？
( jsFiddle )
android - 在 android 中使用 vh 设置父高度时 100% 高度不起作用
我在 Android 上使用 Chrome 时遇到了这个问题，它可以在同一设备上的其他浏览器上运行：
问题是当我将高度设置为 100% 时，嵌套的 DIV 没有填充其父级（其高度为 100vh）。
我在 Chrome 版本上进行了测试：26.0.1410.58 和 30.0.0.0。
:(