Questions tagged «viewport»

视口是计算机图形学中的矩形视区，或者是用于光学组件的术语。它在不同的上下文中有几个定义。视口是屏幕的一个区域，用于显示要显示的全部图像的一部分。也可以是一起组成一个布局的一组区域。

15
如何在Mobile Safari上禁用视口缩放？
我尝试了所有这三个方法都无济于事： <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /> 每个都是我发现由Google搜索或SO搜索推荐的不同值，但是' user-scaleable = X '值似乎都不起作用 我还尝试了用逗号分隔值，而不是分号，没有运气。然后，我尝试仅具有user-scalable价值，仍然没有运气。 更新 从苹果网站上得到了它，它的工作原理是： <meta name="viewport" content="width=device-width, user-scalable=no" /> 事实证明，问题出在非标准引号，因为我从使用它们的网站复制了元标记，哎呀
9
如何在Vim中增加垂直分割窗口的大小
:vsplit（简称:vs：）垂直分割Vim视口。:30vs拆分视口，使新窗口宽30个字符。创建此30个字符的窗口后，如何将其大小更改为31或29？ 使用水平窗口时Ctrl- W +将行数增加一。将列增加一的等效命令是什么？
316 vim  window  viewport 
7
使用jQuery获取视口大小
如何使用jQuery确定浏览器视口的大小，并在调整页面大小后重新检测到它？我需要在该空间中放入一个IFRAME大小（每个边距都略有间隔）。 对于那些不知道的人，浏览器视口不是文档/页面的大小。它是滚动前窗口的可见大小。
307 jquery  resize  size  viewport 
30
检测视口方向（如果方向为纵向显示警报消息，建议用户进行说明）
我正在建立一个专门针对移动设备的网站。特别是一页，最好在横向模式下查看。 有没有一种方法可以检测访问该页面的用户是否正在以“纵向”模式查看该页面，如果显示，则显示一条消息，通知用户该页面在横向模式下的浏览效果最佳？如果用户已经在横向模式下查看它，则不会出现任何消​​息。 因此，基本上，我希望站点检测视口的方向，如果方向是纵向，则显示一条警告消息，通知用户该页面最好在横向模式下查看。
17
禁用视口缩放iOS 10+野生动物园？
我已经更新我的iPhone 6加至10的iOS beta版本，只是发现，在移动Safari浏览器，您可以通过双击放大任何网页或捏忽略了user-scalable=no在meta标签代码。我不知道这是错误还是功能。如果将其视为功能，我们如何禁用iOS 10 Safari的视口缩放功能？ 在iOS 11/12发行版上进行了更新，iOS 11和iOS 12野生动物园仍然不遵守user-scalable=nometa标签。
9
在ReactJS中获取视口/窗口高度
如何在ReactJS中获得视口高度？在普通的JavaScript中，我使用 window.innerHeight() 但是使用ReactJS，我不确定如何获取此信息。我的理解是 ReactDOM.findDomNode() 仅适用于创建的组件。但是，documentor body元素不是这种情况，它可能会给我窗口的高度。
7
HTML5画布100％宽度视口高度？
我正在尝试创建一个画布元素，该元素占用视口宽度和高度的100％。 您可以在我的示例中看到这种情况的发生，但是它正在Chrome和FireFox中添加滚动条。如何防止多余的滚动条，仅将窗口的宽度和高度设置为画布的大小？
151 jquery  html  canvas  viewport 
16
Overflow-x：hidden不能防止内容在移动浏览器中溢出
我在这里有一个网站。 在桌面浏览器中查看时，黑色菜单栏正确地延伸到窗口的边缘，因为body具有overflow-x:hidden。 在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都会显示其完整宽度，从而在页面右侧显示空格。据我所知，该空格甚至不是htmlor body标记的一部分。 即使我在中将视口设置为特定的宽度<head>： <meta name="viewport" content="width=1100, initial-scale=1"> 该站点扩展到1100像素，但仍然有1100以外的空白。 我想念什么？如何将视口保持在1100并切断溢出？
6
使用jQuery获取元素相对于视口的位置
获取页面上元素相对于视口（而不是文档）的位置的正确方法是什么？jQuery.offset功能似乎很有希望： 获取第一个元素的当前坐标，或设置匹配元素集中相对于文档的每个元素的坐标。 但这与文档有关。是否有等效的方法返回相对于视口的偏移量？
4
当视口尚未调整大小时，jQuery $（window）.width（）和$（window）.height（）返回不同的值
我正在编写一个使用jquery的站点，该站点反复调用$(window).width()并$(window).height()根据视口大小来定位和调整元素的大小。 在故障排除中，我发现在不调整视口大小的情况下，重复调用上述jquery函数会得到不同的视口大小报告。 想知道是否有人会在什么情况下知道这种特殊情况，或者仅仅是这样。出现的报告大小差异为20px或更小。它发生在Mac OS X 10.6.2上的Safari 4.0.4，Firefox 3.6.2和Chrome 5.0.342.7 beta中。我尚未测试其他浏览器，因为它似乎并不是特定于该浏览器的。我也无法弄清差异取决于什么，如果不是视口大小，是否还有其他因素会使结果有所不同？ 任何见识将不胜感激。 更新： 这不是值$(window).width()，并$(window).height()正在改变。这是我用来存储上述值的变量的值。 影响值的不是滚动条，变量值更改时也不会出现滚动条。这是我的代码，用于将值存储在变量中（我这样做是为了使它们更短）。 （所有这些都在$(document).ready()） //初始声明变量对其中的其他函数可见 .ready() var windowWidth = $(window).width(); //retrieve current window width var windowHeight = $(window).height(); //retrieve current window height var documentWidth = $(document).width(); //retrieve current document width var documentHeight = $(document).height(); //retrieve current document height var …
3
我可以即时更改移动浏览器中的视口元标记吗？
我有一个为移动Safari浏览器构建的AJAX应用，该应用需要显示不同类型的内容。 对于某些内容，我需要user-scalable=1，对于其他内容，我需要user-scalable=0。 有没有一种方法可以在不刷新页面的情况下修改content属性的值？ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
4
Google Maps API中的“元视口user-scalable = no”有什么意义？
我使用的是Google Maps JavaScript API V3，而官方示例始终都包含此meta标签： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 我见过的大多数第三方示例也都这样做。不过，我使用它编写了一个插件，我的一个用户告诉我，这阻止了他无法在移动设备上放大和缩小。我没有可测试的移动设备，而且我的搜索都没有发现任何有用的信息。 那么，标签的目的是什么？我应该留在里面吗？我是否应该尝试检测浏览器代理，仅将其显示在桌面浏览器上？ 如果您想检查插件，则可以下载，浏览源代码或查看实时示例。
5
元标记中的初始比例，用户可缩放，最小比例，最大比例属性是什么？
我正在浏览网站的源代码，发现了这段代码。 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"> 我想知道这个初始比例，用户可缩放，最小比例，最大比例是什么，这些值是什么意思？并告诉我他们接受的所有价值观是什么。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.