当我将地图(相同的html,css,js)添加到不同的页面时,地图有时会模糊不清.不同的页面可能包含其他html,css和js.左侧的清晰图片位于第三方添加CSS的页面内.右边的那个没有别人的html,css和js.
我该如何解决这个问题?

在检查细节时我注意到的一件事是第二个例子的画布尺寸要小得多.

编辑[固定!]:
我发现了查看ol.js源代码的问题.在控制台上,模糊图像具有map.frameState_.pixelRatio = 0.89(默认为window.devicePixelRatio),而清晰图像具有map.frameState_.pixelRatio = 1.如果我在初始化地图时设置pixelRatio = 1,则修复了问题:
var map = new ol.Map({pixelRatio: 1, ...});
Run Code Online (Sandbox Code Playgroud)
事实证明,如果你的互联网浏览器放大(例如,90%),window.devicePixelRatio将会改变,这会导致模糊.但是,当您缩放回100%时,地图仍会缩放,直到您刷新页面.
我想将浏览器的(IE/FF)页面缩放控件(菜单:查看/缩放/缩放In_Zoom输出)分配给网页上的两个大"(+)( - )"图标,以便视障人士可以使用这些控件方便.
很多搜索合适的脚本都空了,所以我在这里.
您知道的任何代码都可以做到这一点吗?
祝一切顺利...
短发
我想根据我有权访问的javascripts的窗口对象属性找出浏览器窗口中显示内容的缩放级别.我似乎无法找到基于内部宽度,页面偏移等的缩放的正确数学公式.我找到了一个解决方案,但是使用了document.body.getBoundingClientRect调用,它在我的情况下不会返回任何内容我无法判断窗口属性是否有合适的替代品.我正在使用Safari.
是否有一种html/css/javascipt方法在面对用户缩放页面时保持一个恒定大小的<div>?也就是说,使用control-plus来增加文本大小,使用control-minus来减少它.
编辑:我猜,踢球者是我希望<div> 的内容保持相同的大小.
谢谢!
编辑:我的目标是(而且是)保持AdSense <div>不会扩大,以至于掩盖了网页上的大量真实内容.但是来找出(谢谢你@thirtydot)真的没有好办法做到这一点.答案,对我来说(谢谢@Neal!):给<div>溢出:滚动以便牺牲其内容而不是我试图展示的内容.
我想做的事情如下:
<a href="http://www.google.com">Google</a>
Run Code Online (Sandbox Code Playgroud)
当用户悬停链接时:
<div id="display-site">
//working site contained in a div
</div>
Run Code Online (Sandbox Code Playgroud)
注意我知道我可以使用html在新窗口中打开链接,我想我有兴趣弄清楚如何<a>在div容器中"预览" 标记中包含的网站(如果链接悬停) ).
假设我有一个div我定义(32px, 32px)的大小:
html :
<div id="theBox"></div>
Run Code Online (Sandbox Code Playgroud)
css :
div {
width: 32px;
height: 32px;
background-color: gray;
}
Run Code Online (Sandbox Code Playgroud)
如何以像素为单位获得框的实际大小?
您会注意到该框不一定是32px. 它可以更大:

或更小:

或者确切地说32 pixels:

产生差异的原因当然是因为 Chrome 和 Internet Explorer 允许我缩放.
我想知道元素的实际大小。为什么?没理由; 只是因为。我很好奇,我想拓宽人类知识和理解的界限。
或者因为我需要设置Canvas元素的内部分辨率以匹配画布元素的实际大小 - 否则渲染的画布内容将在未经我许可的情况下被拉伸:

虽然,我想知道元素大小的原因不一定只适用于 Canvas。我在问一个通用的 div 元素;朝答案将被使用canvas,img,video,和其他任何我的愿望。
我有一个带有边界权属性的 div。当我的网站缩小时,div 大小会适应,但边框仍将保持相同大小。这会导致 div 移出其父级。有没有办法检测缩放级别?这样我就可以根据缩放改变大小。如果是这样,那又如何?
提前致谢
I am trying to solve the problem of using Javascript to determine the width of my browser's "window". I'm aware different people can mean different things in this context so to be specific I mean the area in green as in this post.
I've read the first two replies to that post and a number of other stackoverflow solutions to this problem, none of which I could get to work: I am using Firefox 27.0.1 with the window maximised on …
我们如何获取 Chrome 浏览器窗口的实际浏览器高度?在我的测试中,如果浏览器没有使用可用的完整高度,我将很难使用 Javascript 计算其实际高度。
就我的示例而言,我的浏览器窗口的高度为 1033 像素。Chrome 浏览器窗口底部和 Windows 工具栏间隔 7 像素。
我无法找出从 Javascript 计算 1033px 实际高度的方法。如果我知道导航/菜单/工具栏高度(在我的示例中为 109px),我就可以计算出高度。
1040px (screen.availHeight)
- 109px (Nav/Menu Toolbars Height)
- 1px (bottom border)
- 923px (window.innerHeight)
-------
7px (Height Pixels not used by Browser)
1040px - 7px = 1033px (Browser Actual Height)
Nav/Menu/Toolbars Height: 109px
Browser Height: 1033px
Windows Toolbar: 40px
Values from Javascript:
Screen Size: 1080px
screen.height = 1080
screen.availHeight = 1040
window.outerHeight = 1040
window.innerHeight = 923
$(window).height() = 923
Run Code Online (Sandbox Code Playgroud)
是否有任何 …
可能重复:
如何在所有现代浏览器中检测页面缩放级别?
var obj=document.body; // obj=element for example body
// bind mousewheel event on the mouseWheel function
if(obj.addEventListener)
{
obj.addEventListener('DOMMouseScroll',mouseWheel,false);
obj.addEventListener("mousewheel",mouseWheel,false);
}
else obj.onmousewheel=mouseWheel;
function mouseWheel(e)
{
// disabling
e=e?e:window.event;
if(e.ctrlKey)
{
if(e.preventDefault) e.preventDefault();
else e.returnValue=false;
return false;
}
}
Run Code Online (Sandbox Code Playgroud)
我正在开发一个Web应用程序,如果用户放大/缩小,所有ui元素的顺序将不正确.那么,有什么方法可以阻止它吗?我想到了一些方法,但它有可能吗?
1)获取用户的屏幕分辨率.当窗口大小改变(宽度或高度)时,将窗口宽度/高度返回到屏幕宽度/高度.
2)将鼠标滚动事件或键盘事件绑定为空.(请参阅上面的演示代码),但如果用户单击浏览器并选择放大,该怎么办?
谢谢