我使用了screen.width来获取浏览器的宽度。在iPhone Safari上运行良好,但在Android手机上无法正常工作(对于Android浏览器它显示800宽度)。
有没有一种兼容的方法可以获取屏幕宽度?我不想使用UserAgent来检查是否为移动浏览器。我想使用JavaScript,并且逻辑应包括屏幕宽度。
我使用了screen.width来获取浏览器的宽度。在iPhone Safari上运行良好,但在Android手机上无法正常工作(对于Android浏览器它显示800宽度)。
有没有一种兼容的方法可以获取屏幕宽度?我不想使用UserAgent来检查是否为移动浏览器。我想使用JavaScript,并且逻辑应包括屏幕宽度。
screen.width
和screen.height
的值是错误的。可以尝试使用类似以下的延时操作:setTimeout(CheckResolution, 300);
其中CheckResolution
是您的函数。
<script type="text/javascript">
function getWidth()
{
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.innerWidth != null)
xWidth = window.innerWidth;
if(document.body != null)
xWidth = document.body.clientWidth;
return xWidth;
}
function getHeight() {
xHeight = null;
if(window.screen != null)
xHeight = window.screen.availHeight;
if(window.innerHeight != null)
xHeight = window.innerHeight;
if(document.body != null)
xHeight = document.body.clientHeight;
return xHeight;
}
</script>
screen.height shows the height of the screen
screen.width shows the width of the screen
screen.availHeight shows height but removes the interface height like taskbar, and browser menu etc.
screen.availWidth same as above,instead gives available width
如果您想获取浏览器的宽度值,我测试了几个选项:
我正在使用bootstrap 3,唯一与IE和Chrome匹配bootstrap 3断点的解决方案是:
window.innerWidth
$( window ).width(): 1183
$( document ).width():1183
screen.width: 1536
$( window ).innerWidth():1183
$( document ).innerWidth():1183
window.innerWidth: 1200
$( document ).outerWidth():1183
window.outerWidth: 1216
document.documentElement.clientWidth: 1183
互联网浏览器 10
$( window ).width(): 1200
$( document ).width():1200
screen.width: 1536
$( window ).innerWidth():1200
$( document ).innerWidth():1200
window.innerWidth: 1200
$( document ).outerWidth():1200
window.outerWidth: 1214
document.documentElement.clientWidth: 1200
只需阅读这两个URL。它应该可以帮助您获得所需的内容。
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html http://www.quirksmode.org/mobile/tableViewport.html
请注意,Android 可能有800像素宽。请参阅以下文章: 了解三星Galaxy Tab屏幕密度
编辑:哦,我想那个指向Android bug的人比我更正确。
我发现使用window.outerWidth
可以得到正确的值。我在BrowserStack的Android模拟器上测试过。