如何在所有现代浏览器中检测页面缩放级别?虽然这个线程告诉我如何在IE7和IE8中做到这一点,但我找不到一个好的跨浏览器解决方案.
Firefox存储页面缩放级别以供将来访问.在第一页加载时,我能够获得缩放级别吗?我读到它的某个地方在页面加载后发生缩放变化时有效.
有没有办法陷阱'zoom'
事件?
我需要这个,因为我的一些计算是基于像素的,并且在缩放时它们可能会波动.
由@tfl给出的修改样本
此页面在缩放时提醒不同的高度值.[的jsfiddle]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
</head>
<body>
<div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie …
Run Code Online (Sandbox Code Playgroud) 我需要在我的网站上创建2个按钮来改变浏览器缩放级别(+)( - ).由于图像大小和布局问题,我正在请求浏览器缩放而不是css缩放.
嗯,这有可能吗?我听说过相互矛盾的报道.
我想让我的网站缩小80%.即将图像,字体,所有内容缩小到其当前大小的80%.有没有办法用jQuery或CSS做到这一点?
我试过body { zoom:80% }
但它只适用于Chrome.
我想将HTML页面转换为A4大小的PDF.
page.paperSize = {
format: 'A4',
orientation: 'portrait',
border: '1cm'
};
Run Code Online (Sandbox Code Playgroud)
有没有办法扩大网站的宽度以适应A4的宽度?
如果我有以下HTML:
<div style="width:1500px; text-align:right;">
right 1500px
</div>
Run Code Online (Sandbox Code Playgroud)
div的右端从页面上掉下来.
我玩过这个viewportSize
房产:
page.viewportSize = {
width: 480,
height: 800
};
Run Code Online (Sandbox Code Playgroud)
我原本期望更大的视口宽度导致页面的更大部分被渲染到PDF中.
page.zoom
Run Code Online (Sandbox Code Playgroud)
也没有达到预期的效果.
PDF文件是报告.对于专业外观,它们应该是A4而不是任意大小.
或者phantomjs是我的问题的错误工具?
我在Ubuntu 12.04.4上使用phantomjs版本1.9.7.
编辑:
这里似乎有三个不同的维度:
vieportSize
这是用于呈现的大小,如文档中所述paperSize
这是生成的PDF文档的大小我还没有找到改变屏幕尺寸的方法.
我通过渲染http://www.whatismyscreenresolution.com/
到PDF来找到它.
我对此页面有疑问.我在Firefox上开发了它的默认缩放级别.我是白痴,我还没有在Chrome上测试它.所以,现在我看到Chrome和其他基于Webkit的浏览器的页面布局和/或字体大小不同.默认Chrome缩放级别为75%,因此Chrome上的所有内容都较小.我不得不说我已经制作了十几个网络应用程序但是集中在应用程序的后端方面,并且从未对页面在不同浏览器上的外观有很多想法.
我的意思是,我有javascript跨浏览器的东西必须解决,但这是我从未遇到的事情.
我认为这是错误的字体大小.我有一个#main-wrap
包装整个应用程序,基本字体大小为16px
.因此,#navigation a
有0.7em
因为这样它看起来在Firefox正常的,但在Chrome看起来真的很小.
任何人都可以发布一些关于这种情况发生的提示或提示吗?
编辑:
我已经解决了这个问题
zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
Run Code Online (Sandbox Code Playgroud)
它的确有效,但据我所知,这样做很好.是否有CSS技术可以使浏览器中的页面看起来相同?