草庐IT

Viewport

全部标签

html - 使 CSS 媒体查询使用 html 文档而不是浏览器的 em 大小?

我正在尝试使用媒体查询根据窗口的宽度以block的形式更改元素的宽度(这允许我在不更改列宽的情况下增加页面上的列数)。我希望能够使用em而不是像素来执行此操作,这样如果您更改字体大小,一切都会看起来正确。但是,如果我使用以下内容:html{font-size:12px;/*youcouldalsouse75%ifyouwanttobepercentbased.*/}@mediascreenand(min-width:42em){div#page{width:42em;}}当窗口的最小宽度达到42*16px时,媒体查询将触发,这是我的浏览器(Safari)的默认字体大小,而div#pag

javascript - Google Pixel 和 Google Pixel XL 设备的视口(viewport)宽度、高度和设备像素比是多少

我正在开发一个网站,想看看它在GooglePixel和GooglePixelXL设备上的运行情况。由于我无权访问这些设备,因此我需要知道这些设备的视口(viewport)宽度、高度和设备像素比。我已经尝试在Google上进行搜索,但仍然找不到任何有用的信息。最新的Chrome也没有在开发者工具中列出这些设备的尺寸。如果任何有权访问这些设备的人都能弄清楚所需的信息,那将非常有帮助。 最佳答案 Pixel和PixelXL均列为具有411×731的css像素分辨率,设备像素比分别为2.6和3.5。来源:https://material.i

javascript - Google Pixel 和 Google Pixel XL 设备的视口(viewport)宽度、高度和设备像素比是多少

我正在开发一个网站,想看看它在GooglePixel和GooglePixelXL设备上的运行情况。由于我无权访问这些设备,因此我需要知道这些设备的视口(viewport)宽度、高度和设备像素比。我已经尝试在Google上进行搜索,但仍然找不到任何有用的信息。最新的Chrome也没有在开发者工具中列出这些设备的尺寸。如果任何有权访问这些设备的人都能弄清楚所需的信息,那将非常有帮助。 最佳答案 Pixel和PixelXL均列为具有411×731的css像素分辨率,设备像素比分别为2.6和3.5。来源:https://material.i

html - 当视口(viewport)调整大小时,如何强制嵌套的 flexbox 元素收缩并显示滚动条?

我正在使用flexbox构建布局,总体来说相当简单。View分为三个部分:顶部的导航栏、左侧的侧边栏和填充剩余空间的内容区域。导航栏的高度固定,侧边栏的宽度固定。此外,侧边栏和内容区域应该单独滚动。如果侧边栏中的内容溢出,它应该创建一个特定于侧边栏的滚动条。内容View也是如此。重要的是,这意味着整个视口(viewport)绝不能滚动:它应该保持静态(只有元素应该滚动)。使用flexbox构建这个布局非常简单:html,body{height:100%;width:100%;}body{margin:0;}#root{display:flex;height:100%;}#frame{d

html - 当视口(viewport)调整大小时,如何强制嵌套的 flexbox 元素收缩并显示滚动条?

我正在使用flexbox构建布局,总体来说相当简单。View分为三个部分:顶部的导航栏、左侧的侧边栏和填充剩余空间的内容区域。导航栏的高度固定,侧边栏的宽度固定。此外,侧边栏和内容区域应该单独滚动。如果侧边栏中的内容溢出,它应该创建一个特定于侧边栏的滚动条。内容View也是如此。重要的是,这意味着整个视口(viewport)绝不能滚动:它应该保持静态(只有元素应该滚动)。使用flexbox构建这个布局非常简单:html,body{height:100%;width:100%;}body{margin:0;}#root{display:flex;height:100%;}#frame{d

css - 附加到视口(viewport)底部的 DIV

我已经阅读了一些关于如何让DIV附加到视口(viewport)底部的其他帖子-我已经成功实现了一个解决方案,但我遇到了一些问题。地址:http://s222894377.onlinehome.us/您可以看到在我创建并附加的DIV中有一个100%拉伸(stretch)的图像。它上面的DIV设置为height:100%;但它占用了太多的垂直空间,我正在尝试补偿它对整体高度的影响。结构是:我已经尝试过将负边距设置为顶部和底部边距以及填充以补偿页眉高度的变体,但还没有弄清楚。如果有人有任何建议-将不胜感激。提前致谢毫米 最佳答案 如果您尝

css - 附加到视口(viewport)底部的 DIV

我已经阅读了一些关于如何让DIV附加到视口(viewport)底部的其他帖子-我已经成功实现了一个解决方案,但我遇到了一些问题。地址:http://s222894377.onlinehome.us/您可以看到在我创建并附加的DIV中有一个100%拉伸(stretch)的图像。它上面的DIV设置为height:100%;但它占用了太多的垂直空间,我正在尝试补偿它对整体高度的影响。结构是:我已经尝试过将负边距设置为顶部和底部边距以及填充以补偿页眉高度的变体,但还没有弄清楚。如果有人有任何建议-将不胜感激。提前致谢毫米 最佳答案 如果您尝

javascript - fabricjs - 在视口(viewport)中缩放 Canvas (可能吗?)

目前,我尝试为基于fabricjs-framework的可视化编辑器实现缩放功能.我环顾四周,但越来越困惑,因为我认识到这个特性/功能的开发对于社区和开发人员来说是一条漫长而崎岖的道路。因此,许多解决方案似乎已经过时。但此刻我找到了fabric-viewportdevelopedbytheRTSGrouponGithub.实现很简单,但它只能缩放/控制Canvas(内部)中的对象。也不是Canvas。但我也想缩放Canvas。(视口(viewport)内部)为了更好地理解我在寻找什么,我做了一个简单的解释图片:有没有办法使用fabricjs-viewport插件或其他尚未过时的解决方案

javascript - fabricjs - 在视口(viewport)中缩放 Canvas (可能吗?)

目前,我尝试为基于fabricjs-framework的可视化编辑器实现缩放功能.我环顾四周,但越来越困惑,因为我认识到这个特性/功能的开发对于社区和开发人员来说是一条漫长而崎岖的道路。因此,许多解决方案似乎已经过时。但此刻我找到了fabric-viewportdevelopedbytheRTSGrouponGithub.实现很简单,但它只能缩放/控制Canvas(内部)中的对象。也不是Canvas。但我也想缩放Canvas。(视口(viewport)内部)为了更好地理解我在寻找什么,我做了一个简单的解释图片:有没有办法使用fabricjs-viewport插件或其他尚未过时的解决方案

html - 在 Windows8-Arm 上禁用 IE11 中的所有页面缩放

如何在WinRT上禁用通过IE11访问的网页的所有视口(viewport)缩放?我正在开发一个应用程序,它在大小适合视口(viewport)的Canvas上自己绘图,并在内部提供自己的缩放功能。让浏览器缩放会使Canvas变得一团糟。我一直在浏览现有的答案,但似乎没有一个适用于这个平台:或者或者或者或者在都没有效果。此外,我想阻止双击缩放,但我看到的各种jQuery片段在这里似乎也不起作用。 最佳答案 哎呀,所以我一问这个问题,我就找到了解决办法:添加:html{-ms-content-zooming:none;/*Disables