草庐IT

Viewport

全部标签

html - 让 Div 覆盖整个页面(不仅仅是视口(viewport))?

所以我有一个我认为很常见但我还没有找到好的解决方案的问题。我想让一个覆盖div覆盖整个页面......而不仅仅是视口(viewport)。我不明白为什么这很难做到...我已经尝试将body、html高度设置为100%等,但这不起作用。这是我目前所拥有的:.OverLay{position:absolute;z-index:3;opacity:0.5;filter:alpha(opacity=50);top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color:Black;color:White;}body{h

javascript - 我可以即时更改移动版 Safari 中的视口(viewport)元标记吗?

我有一个为移动Safari浏览器构建的AJAX应用程序,需要显示不同类型的内容。对于某些内容,我需要user-scalable=1,对于其他内容,我需要user-scalable=0。有没有办法在不刷新页面的情况下修改content属性的值? 最佳答案 我意识到这有点老了,但是,是的,这是可以做到的。一些让您入门的javascript:viewport=document.querySelector("meta[name=viewport]");viewport.setAttribute('content','width=device

javascript - 我可以即时更改移动版 Safari 中的视口(viewport)元标记吗?

我有一个为移动Safari浏览器构建的AJAX应用程序,需要显示不同类型的内容。对于某些内容,我需要user-scalable=1,对于其他内容,我需要user-scalable=0。有没有办法在不刷新页面的情况下修改content属性的值? 最佳答案 我意识到这有点老了,但是,是的,这是可以做到的。一些让您入门的javascript:viewport=document.querySelector("meta[name=viewport]");viewport.setAttribute('content','width=device

javascript - 将视口(viewport)设置为缩放以适应宽度和高度

我正在开发一个适合特定宽度和高度的网站(一个885x610的div,边框为1像素,上边距为3像素)。我希望用户永远不必滚动或缩放来查看整个div;它应该始终完全可见。由于设备的分辨率和宽高比各不相同,因此我想到了使用JavaScript动态设置“viewport”元标记的想法。这样,div将始终具有相同的尺寸,不同的设备将不得不以不同的方式缩放,以便在其视口(viewport)中适应整个div。我尝试了我的想法并得到了一些奇怪的结果。以下代码适用于第一个页面加载(在Android4.4.0上的Chrome32.0.1700.99中测试),但当我刷新时,缩放级别会发生变化。此外,如果我注

javascript - 将视口(viewport)设置为缩放以适应宽度和高度

我正在开发一个适合特定宽度和高度的网站(一个885x610的div,边框为1像素,上边距为3像素)。我希望用户永远不必滚动或缩放来查看整个div;它应该始终完全可见。由于设备的分辨率和宽高比各不相同,因此我想到了使用JavaScript动态设置“viewport”元标记的想法。这样,div将始终具有相同的尺寸,不同的设备将不得不以不同的方式缩放,以便在其视口(viewport)中适应整个div。我尝试了我的想法并得到了一些奇怪的结果。以下代码适用于第一个页面加载(在Android4.4.0上的Chrome32.0.1700.99中测试),但当我刷新时,缩放级别会发生变化。此外,如果我注

html - 元视口(viewport)标签似乎被完全忽略或没有效果

我把这个标签放在了awebpage的头部:出于某种原因,它在我的iPhone上似乎被忽略了,甚至添加了user-scalable=no没有效果。我已经尝试了许多宽度值、初始比例等...似乎没有任何效果。有谁知道这可能是什么原因造成的?我可以在源代码中清楚地看到它在标题中。我的iPhone是iOS7。编辑:问题仍然出现在iOS6和xcodeios模拟器上,所以我不认为这是由于iOS7。 最佳答案 它正在工作!在您使用的页面上:当我在手机(ios7iphone5)上打开页面时,我看到了完全正确的结果。您是否100%确定您真的尝试过将以下

html - 元视口(viewport)标签似乎被完全忽略或没有效果

我把这个标签放在了awebpage的头部:出于某种原因,它在我的iPhone上似乎被忽略了,甚至添加了user-scalable=no没有效果。我已经尝试了许多宽度值、初始比例等...似乎没有任何效果。有谁知道这可能是什么原因造成的?我可以在源代码中清楚地看到它在标题中。我的iPhone是iOS7。编辑:问题仍然出现在iOS6和xcodeios模拟器上,所以我不认为这是由于iOS7。 最佳答案 它正在工作!在您使用的页面上:当我在手机(ios7iphone5)上打开页面时,我看到了完全正确的结果。您是否100%确定您真的尝试过将以下

html - iOS 9.x 中嵌入式 Facebook 浏览器的视口(viewport)/页面高度错误

打开demo时来自core-layout的申请使用iOS9.x上的Facebook应用程序中的嵌入式浏览器(至少),当设备处于纵向模式时,页脚元素不可见。如果将设备旋转到横向模式,页脚将部分可见。但是,页脚(带有按钮)应该完全可见。第一张图片展示了演示应用程序应该的外观,而第二张图片展示了在使用Facebook应用程序的嵌入式WebView查看时,演示应用程序如何缺少页脚(图片是从Chrome桌面浏览器说明了错误是如何表现的):在测试了许多不同的假设后,我们得出结论,该错误是由浏览器使页面/视口(viewport)高于可见区域引起的。这个错误似乎与iOS9Safariviewporti

html - iOS 9.x 中嵌入式 Facebook 浏览器的视口(viewport)/页面高度错误

打开demo时来自core-layout的申请使用iOS9.x上的Facebook应用程序中的嵌入式浏览器(至少),当设备处于纵向模式时,页脚元素不可见。如果将设备旋转到横向模式,页脚将部分可见。但是,页脚(带有按钮)应该完全可见。第一张图片展示了演示应用程序应该的外观,而第二张图片展示了在使用Facebook应用程序的嵌入式WebView查看时,演示应用程序如何缺少页脚(图片是从Chrome桌面浏览器说明了错误是如何表现的):在测试了许多不同的假设后,我们得出结论,该错误是由浏览器使页面/视口(viewport)高于可见区域引起的。这个错误似乎与iOS9Safariviewporti

方向更改后的 javascript 最大视口(viewport)高度 Android 和 iOS

目标:找到设备的最大视口(viewport)高度,包括地址栏的空间,以便我们可以动态调整最小主体的大小并将我们的内容向上推。问题:移动浏览器以不同方式处理方向状态,并以不同方式根据方向更改更新DOM属性。DetectrotationofAndroidphoneinthebrowserwithJavaScript对于Android手机,screen.width或screen.height也会随着设备旋转而更新。|==============================================================================||Device|Ev