意外的视口大小的手机浏览器 [英] Unexpected viewport size for mobile browser
本文介绍了意外的视口大小的手机浏览器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是测试用下面的code不同的移动浏览器不同的视口尺寸:
I was testing different viewport sizes for various mobile browsers using the code below :
<!DOCTYPE html>
<html>
<head>
<title>Browser details</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script type="text/javascript" language="javascript">
window.onload = function (e) {
var width = document.getElementById("width");
var height = document.getElementById("height");
var w = window.innerWidth;
var h = window.innerHeight;
width.innerHTML = w;
height.innerHTML = h;
}
</script>
</head>
<body>
<div id="">Viewport Width x Height : <span id="width"></span> x <span id="height"></span></div>
</body>
</html>
我测试了我的code上的三星Galaxy S4 GT-I9500 。针对不同的Android浏览器的输出是:
I tested my code on Samsung Galaxy S4 GT-I9500. The output for different Android browsers is :
谷歌浏览器:360°×559
Google Chrome : 360 x 559
Mozilla Firefox浏览器:980×480
Mozilla Firefox : 980 x 480
默认浏览器:360°×592
Default Browser : 360 x 592
Mozilla Firefox的为什么如此大的差别?我期望的输出应该在 360 X 5 - (500 ..something)
Why so much difference for mozilla firefox? I expect the output should be around 360 X 5-- (five hundred ..something)
推荐答案
尝试使用jQuery代替;
Try using jquery instead;
var height = $(window).height();
var width = $(window).width();
这篇关于意外的视口大小的手机浏览器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文