标签: viewport

我正在使用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())

//最初声明变量对于其中的otehr函数是可见的 .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 vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function …

我有一个为移动Safari构建的ajax应用程序,需要显示不同类型的内容.一些内容我需要用户可扩展= 1其他内容我需要user-scalable = 0.有没有办法在不刷新页面的情况下即时更新？

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

我正在使用Google Maps JavaScript API V3,官方示例总是包含此元标记:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

我见过的大多数第三方例子都是这样做的.我写了一个使用它的插件,我的一个用户告诉我,这使他无法放大和移出他的移动设备.我没有要测试的移动设备,我的搜索都没有显示任何有用的信息.

那么,标签的重点是什么？我应该留下吗？我应该尝试检测浏览器代理并仅显示桌面浏览器吗？

如果要检查插件,可以下载它,浏览源代码或查看实例.

所以我一直在使用:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

让我的HTML内容在iPhone上很好地显示.它非常有效,直到用户将设备旋转到横向模式,其中显示器仍然限制在320px.

是否有一种简单的方法来指定一个视口,该视口会根据用户更改设备方向而发生变化？或者我必须使用Javascript来处理它？

我想禁用移动设备上的捏合和缩放.

我应该在视口中添加什么配置？

链接:http://play.mink7.com/n/dawn/

什么是HTML中的视口？您能举例说明如何访问视口详细信息吗？

我正在浏览一个网站的源代码并找到了这段代码.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

我想知道这个初始规模,用户可扩展性,最小规模,最大规模是什么以及这些值意味着什么？并告诉我他们接受的所有价值观.

我试图找到浏览器视口的确切高度和宽度,但我怀疑Mozilla或IE正在给我错误的数字.这是我的身高方法:

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

我还没有开始宽度,但我猜它会有类似的东西.

是否有更正确的方法来获取此信息？理想情况下,我也希望该解决方案能够与Safari/Chrome /其他浏览器配合使用.

我添加了"viewport"元标记"width=device-width,initial-scale=1.0",在iPad上,页面在横向模式下加载很好,它可以很好地切换到纵向,当我将其旋转回横向时,它会缩放页面,我必须将其缩放回到1比例.

我可以通过添加来修复此问题"maximum-scale=1.0, user-scalable=no",但我想知道是否有一种方法可以解决这个问题,而不会让用户放弃页面.

如果您有任何建议我很乐意听到,
谢谢!

我在这里使用Twitter Bootstrap构建了一个响应式站点:http://zarin.me/cce/

响应式设计在iPad和iPhone上运行良好,但是当我将设备从纵向翻转到横向时,网站会放大而不是适应屏幕(捏屏幕工作).

我错过了什么？这是一个视口问题吗？这是我在我的唯一视口代码:

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

提前致谢!