如何在所有现代浏览器中检测页面缩放级别?虽然这个线程告诉我如何在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) 我正在使用Chrome中的设备指标覆盖来测试针对较小分辨率的响应式网站(在这种情况下为320x480).
在这种情况下,我的视口元标记对页面没有任何影响.徽标看起来很小,而且我完全不可读.或多或少,我会说我看到的一切都在.5级.
这是我的HTML头:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" / >
<!--[if lte IE 8]>
<style>
.wrapper {min-width: 960px; padding: 0 10px;}
.hovertext {background: #ccc;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Run Code Online (Sandbox Code Playgroud)
这确实适用于其他人的网站....我不知道我做错了什么...