草庐IT

Viewport

全部标签

javascript - 视口(viewport)大小改变时自动刷新页面

我正在为我的网站使用响应式和自适应媒体查询以适应智能手机......现在的问题是我的最大宽度移动查询以480像素结束,这是大多数手机旋转显示宽度(当手机在其上时边...)。现在一些手机,比如HTCdesire的最大屏幕宽度为533px,现在当用户第一次在垂直位置加载页面(320px屏幕宽度)并且他/她旋转屏幕到533px宽度时,它超出了我的设计规范它看起来有点糟糕……(因为布局是为最大480像素设计的……)现在解决这个问题的唯一方法是在视口(viewport)尺寸发生变化后刷新页面。如何强制刷新?谢谢 最佳答案 如果设备旋转窗口调整

html - 视口(viewport)高度 100% 不适用于页面元素

我不知道为什么我的边框停在页面底部之前。我尝试了很多事情:清除float、100%、jQuery、vh、vmax+我已经从stackoverflow阅读了其他问题,但它总是在底部之前停止。我有两个divsection.left和section.middle。我试图在section.leftdiv上设置一个8px边框,使其从页面顶部到底部。但如果页面变长,它就会停止。参见demoHTMLLoremipsumdolorsitamet,consectetueradipiscingelit.Sedposuereinterdumsem.Quisqueligulaerosullamcorperqu

html - 视口(viewport)高度 100% 不适用于页面元素

我不知道为什么我的边框停在页面底部之前。我尝试了很多事情:清除float、100%、jQuery、vh、vmax+我已经从stackoverflow阅读了其他问题,但它总是在底部之前停止。我有两个divsection.left和section.middle。我试图在section.leftdiv上设置一个8px边框,使其从页面顶部到底部。但如果页面变长,它就会停止。参见demoHTMLLoremipsumdolorsitamet,consectetueradipiscingelit.Sedposuereinterdumsem.Quisqueligulaerosullamcorperqu

html - 我可以使用 CSS 在视口(viewport)中垂直居中固定高度的 DIV 吗?

我们有一个登录页面,设计为在页面中间垂直居中放置一个200像素高的DIV。也就是说,它创建了一个200像素的蓝色带,从左边缘到右边缘(其中包含表单元素),理想情况下无论浏览器窗口如何调整大小,它都应该在视口(viewport)中保持垂直居中。这一定是一个CSS解决方案。假设这里有一些示例标记:Centerthisbabyverticallyinthe#mainDiv,please!假设我的CSS规定#mainDiv被拉伸(stretch)以覆盖视口(viewport)的顶部和底部,这很容易做到。是否有CSS规则可以应用于任何元素或页面,这些元素或页面将可靠地跨浏览器(包括IE6)垂直居

html - 我可以使用 CSS 在视口(viewport)中垂直居中固定高度的 DIV 吗?

我们有一个登录页面,设计为在页面中间垂直居中放置一个200像素高的DIV。也就是说,它创建了一个200像素的蓝色带,从左边缘到右边缘(其中包含表单元素),理想情况下无论浏览器窗口如何调整大小,它都应该在视口(viewport)中保持垂直居中。这一定是一个CSS解决方案。假设这里有一些示例标记:Centerthisbabyverticallyinthe#mainDiv,please!假设我的CSS规定#mainDiv被拉伸(stretch)以覆盖视口(viewport)的顶部和底部,这很容易做到。是否有CSS规则可以应用于任何元素或页面,这些元素或页面将可靠地跨浏览器(包括IE6)垂直居

html - 在 CSS 中设置移动页面缩放/缩放

我正在为一个我无法更改标记或包含任何JS的网站制作主题。我只能控制主题的CSS,只能在页面主体中编写一些HTML。我试图让这个主题响应,但我看不出如何在没有像这样的视口(viewport)元标记的情况下控制手持设备上的初始比例或页面缩放:所以发生的情况是,即使我可以通过CSS@media查询应用特定于移动设备的布局,但在手机上查看时网站会缩小。在放大之前文本和图像太小,一旦放大,布局太大并且有水平滚动条。它在桌面上调整大小的浏览器窗口中看起来很完美;问题是手机浏览器会自动缩放页面。所以我正在寻找解决方法。我目前有两种思路,欢迎任何其他建议:有什么方法可以单独在CSS中完成视口(view

html - 在 CSS 中设置移动页面缩放/缩放

我正在为一个我无法更改标记或包含任何JS的网站制作主题。我只能控制主题的CSS,只能在页面主体中编写一些HTML。我试图让这个主题响应,但我看不出如何在没有像这样的视口(viewport)元标记的情况下控制手持设备上的初始比例或页面缩放:所以发生的情况是,即使我可以通过CSS@media查询应用特定于移动设备的布局,但在手机上查看时网站会缩小。在放大之前文本和图像太小,一旦放大,布局太大并且有水平滚动条。它在桌面上调整大小的浏览器窗口中看起来很完美;问题是手机浏览器会自动缩放页面。所以我正在寻找解决方法。我目前有两种思路,欢迎任何其他建议:有什么方法可以单独在CSS中完成视口(view

html - 制作内容以缩放并适合 PhoneGap(使用视口(viewport))

我正在尝试将一个旧元素改编并移植到PhoneGap。到目前为止,该元素在Android浏览器下可以正常工作,但不能与PhoneGap一起使用,因为它不会调整内容以适应整个屏幕。它总是留下一个空白,这不是我想要的。PhoneGap似乎没有关注我正在使用的元标记中的视口(viewport)属性。我一直在做一些测试来找出问题,但没有任何结果。例如下面的测试只包含两个文件:index.html和config.xml它包含一个宽度为276像素的DIV,我希望PhoneGap能够像Android浏览器一样使其适合整个页面。顺便说一句,我正在使用PhoneGapBuild网站在线构建此测试。这是in

html - 制作内容以缩放并适合 PhoneGap(使用视口(viewport))

我正在尝试将一个旧元素改编并移植到PhoneGap。到目前为止,该元素在Android浏览器下可以正常工作,但不能与PhoneGap一起使用,因为它不会调整内容以适应整个屏幕。它总是留下一个空白,这不是我想要的。PhoneGap似乎没有关注我正在使用的元标记中的视口(viewport)属性。我一直在做一些测试来找出问题,但没有任何结果。例如下面的测试只包含两个文件:index.html和config.xml它包含一个宽度为276像素的DIV,我希望PhoneGap能够像Android浏览器一样使其适合整个页面。顺便说一句,我正在使用PhoneGapBuild网站在线构建此测试。这是in

ios - 新的 iOS 7.1 minimal-ui viewport 设置中是否存在错误?

iOS7.1中新的“最小用户界面”设置非常适合横向网站。我的Web应用程序为其内容使用全屏、绝对定位的div,以使其具有类似应用程序的感觉。但是Safari似乎只在底部添加了URL栏的高度。我在不同的iPhone上试过这个,结果相同......这是页面加载后的样子:这是错误还是我做错了或遗漏了什么?Clickforexample(viewoniPhonewithiOS>=7.1) 最佳答案 我在iPhone5+ios7.1+minimal-ui上遇到了同样的问题。此代码成功解决了这个问题。window.addEventListene