如何在我的网站页面中扩展iframe的内容(在我的示例中,它是一个HTML页面,而不是弹出窗口)?
例如,我想以if原始大小的80%显示iframe中显示的内容.
如何在Firefox和Opera中缩放HTML元素?
该zoom物业正在IE,谷歌浏览器和Safari中工作,但它不适用于Firefox和Opera.
是否有任何方法可以将此属性添加到Firefox和Opera?
我刚刚根据他们发给我的Photoshop文件为客户建立了一个网站,然后他们回来告诉我,不知何故,这些PSD的尺寸是他们原来的125%,他们需要将所有内容缩小到现在的80%.
我想我将需要重新剪切所有图像,但我宁愿不重写CSS,所以我正在探索替代方案.
目前,所有值都以像素为单位.我想知道我是否应该尝试找到一个可以获取所有像素值并乘以.8的脚本,或者如果我应该使用px到em转换器然后将html标签中的基本大小设置为80%,或者如果有更好的方法来解决这个问题.
在Firefox中,我可以在访问Web开发人员工具栏时创建全页屏幕截图(可以在开发人员工具设置中激活).不幸的是,我只能使用默认分辨率来执行此操作.有没有机会获得更高分辨率的图像?使用Firefox或附加组件?或者它可以在另一个浏览器中?
我的客户要求我将桌面浏览器当前网站的大小减少30%.
有没有像移动浏览器上的视口元标记那样的css或meta标签?
是否可以在站点上设置默认缩放级别?例如,我可以用一种方式对我的网站进行编码,例如当用户打开它时它会缩放到125%吗?
我的网站正文有这个代码
<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Run Code Online (Sandbox Code Playgroud)
如何将此缩放代码放入其中?
当您在任何浏览器上按Ctrl+-时,页面会缩小到原始大小的 90%。我需要复制它,并在默认情况下以原始页面的 90% 打开我的网页,而不是 100%,因为它在 90% 时看起来更好。
我尝试了此处、此处和此处提到的最常见方法,所有这些方法基本上都告诉您在css.
html
{
zoom: 0.9; /* Old IE only */
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
Run Code Online (Sandbox Code Playgroud)
这样做的问题是它在左侧和右侧产生了一个间隙,并且在顶部产生了一个巨大的间隙,当您通过执行ctrl+手动减小尺寸时,这些间隙不存在-。
当我使用上面提到的代码时会发生这种情况 - 注意左侧,右侧,顶部的间隙。

虽然这是我想要的 - 这就是当您在浏览器中手动执行ctrl+时会发生的情况-。

我该怎么做?
编辑:正如乔纳森在评论中所说,如果我的页面在 90% 时看起来更好,我应该将它设计成那样而不是缩小。问题是我正在使用这个默认模板,我只是更喜欢它的 90% 而不是完整的 100%。
有两种类型的缩放。您在移动浏览器上获得的“捏缩放”,其中内容从屏幕边缘消失。以及您在桌面浏览器上获得的“页面缩放”,就像您按 Ctrl + 时一样。在“页面缩放”之后,页面会重新流动,因此在响应式布局中,您仍然可以看到整个页面宽度。
如何允许用户在移动设备上“页面缩放”?
我想我网站的标题栏上可能有一个 Zoom + 和 Zoom - 按钮。我想要这个是因为我有一个大多数用户都喜欢的网络应用程序,无论是在桌面浏览器还是移动浏览器上。但是一些能力较差的用户发现该网站在他们的某些移动设备上既小又繁琐。捏合缩放的功能(我没有禁用)是一种帮助,但这意味着不断放大和缩小以导航。
我尝试过涉及 CSStransform: scale(...)和 HTML 的解决方案,并<meta name="viewport" ...>从 JavaScript 更改这些。但这些似乎都有“捏缩放”效果,而不是我所追求的页面缩放。也transform: scale(...) 会导致基于js/基于像素的交互类型出现问题,例如我使用的draggable。
我还研究过从 JavaScript 改变 CSS 字体大小。但这仅适用于文本,不适用于图像<div>等。
我正在制作响应式设计,我希望其显示1920p尺寸大于与视口宽度成比例的比例。1920p这对于上述任何分辨率(例如 4k、8k、16k 和其他分辨率)都很有用。
为了使该工作(部分)我必须为每个分辨率创建媒体查询,但是当用户没有使用浏览器窗口的完整显示宽度时,布局会在某些尺寸上中断。
我目前拥有的是:
@media (min-width: 2880px) {
body {
zoom: 1.5;
}
}
@media (min-width: 3840px) {
body {
zoom: 2;
}
}
Run Code Online (Sandbox Code Playgroud)
我想做的是这样的:
@media (min-width: 1920px) {
body {
zoom: calc(100vw / 1920);
}
}
Run Code Online (Sandbox Code Playgroud)
这将使布局对于上述任何分辨率保持静态1920p。
不幸的是,该calc()函数将结果值解析为,px并且浏览器忽略该值,因为zoom属性只接受numberorpercentage其值。
例如,在3840p决议中,我期望有2但实际输出是2px。
有没有办法以某种方式将此输出转换为number没有单位的原始输出?
我创建了一个小提琴来举例说明该问题: https ://jsfiddle.net/bfaria/41rqxbs0/
在此小提琴中,您可以调整输出视口的大小,以查看分辨率高于 625 像素时的缩放行为。请注意,如果您检查该body元素,您将看到声明zoom: calc(100% * calc(100vw / 625)); …
假设我有一个带有div和一个按钮的页面.单击按钮时,应放大div.换句话说,如果该div是100px,当你缩放时,它应该变成200px.而且这个div的所有孩子的体型也要加倍.
最好的方法是什么?
我的理解是有一个CSS zoom,但只在IE中 - 它不是任何CSS标准的一部分.