意外的视口大小的手机浏览器 [英] Unexpected viewport size for mobile browser

查看:163
本文介绍了意外的视口大小的手机浏览器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是测试用下面的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 。针对不同的Andr​​oid浏览器的输出是:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆