Javascript 如何检测手机浏览器的屏幕大小？

我在一个需要在桌面和移动设备上工作的网站上工作。现在我有一个主内容div，设置为屏幕宽度的70%。然而，我觉得这对于移动设备（如手机，而不是平板电脑）来说太小了，我想将其提高到90%或95%，我如何做到这一点（比如对于小于5英寸的屏幕尺寸），而不使用非常不可靠的浏览器嗅探？我一遍又一遍地听到“特征检测特征检测”的咒语，我理解为什么这是一件好事…但我不知道该检测什么“特征”来解决这个问题

谢谢。

您可以使用CSS：

@media screen and (max-width:500px) {
  /* smaller screens */
}

@media screen and (max-width:960px) {
  /* bigger screens */
}

您可以使用CSS：

/*Here goes the CSS for all screens*/

@media handheld {

    /*Here goes the CSS for mobile phones and tablets*/

}

编辑：

另一项建议：

在html中设置

视口

元标记：

<meta name="viewport" content="width=device-width, height=device-height" />

---

现在，您可以获得如下维度：

而不是使用jquery，您可以使用简单的javascript来检测它：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

}

或者您可以将两者结合起来，使其更易于通过jQuery访问

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));

---

现在，$.browser将为上述所有设备返回“device”（设备）以获取物理大小。您不能使用Javascript，而是使用jQuery获取屏幕大小

$(document).ready(function(){
   var elem = document.createElement("div");
   $(elem).attr("id", "removeMe").css({"width":"100%", "height":"100%", "position":"absolute", "top":"0", "left":"0"});
   $("body")[0].append(elem);

   width = $("body #removeMe").width();
   height = $("body #removeMe").height();
   $("body #removeMe").remove();
});

---

这将获得屏幕的像素大小。不过，我会将其与移动检查（如@Abhi jQuery answer）相结合，您需要将此代码放入窗口调整大小事件处理程序中，这样，如果移动屏幕旋转处于打开状态，您就有了新的测量值，您可以通过一点javascript获得大致的屏幕大小

function getScreenSizeInches() {    
    var temp =  document.createElement("div")
    temp.style.overflow='hidden';
    temp.style.visibility='hidden';
    document.body.appendChild(temp)
    temp.style.width = "10in"
    var dpi = temp.offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

请参阅以下小提琴，了解其在实际中的使用情况，或

jQuery版本：

function getScreenSizeInches() {    
    var $temp =  $('<div style="overflow:hidden;visibility:hidden;width:10in"/>').appendTo('body'),
       dpi = $temp[0].offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

函数getScreenSizeInches（）{
变量$temp=$（''）.appendTo（'body'），
dpi=$temp[0]。偏移网络宽度/10；
返回screen.width/dpi+'x'+screen.height/dpi；
}

---

正如评论中指出的那样，这种技术可能非常不准确，因此我不会将其用作屏幕大小的提示…

如今，您可能可以使用屏幕API。屏幕高度或屏幕宽度

---

这是如何让我得到实际尺寸的？iPhone有一个小屏幕，但它会落在你CSS中的“大屏幕”之下。@Neal他是正确的-大小和分辨率不再相关了。我的手机屏幕为4.7英寸，但分辨率比台式电脑高。@Neal我必须返回更新“最大宽度”“每次新设备出现时，ppi都比以前高。@Esaevian css像素只与屏幕像素松散相关。即使分辨率相同，屏幕越小，媒体查询中的值也会越低，这意味着您可以使用它来处理不同的屏幕大小。在jQuery中有没有针对这一点的方法？我需要调整大小的元素是动态创建的，没有链接到类。也许这可以帮助你。嗯……桌面上的Chrome正在响应“手持”查询：jsfiddle.net/WNKpj/EDIT:Wait nevermind。我的错误。嗯，现在看起来iPhone对“掌上电脑”没有响应……回到绘图板。matchMedia不返回booelan，而是返回MediaQueryList。使用

window.matchMedia（“手持”）.matches

。-1我的问题是：“我如何在不使用非常不可靠的浏览器嗅探的情况下做到这一点（比如对于小于5英寸的屏幕尺寸）？不管浏览器嗅探的局限性如何，这个条件对于所有Android设备都会返回真值，包括在HDTV上运行Android的IPTV机顶盒。此外，还有许多新的用户代理即将进入市场，包括FirefoxOS。依赖用户代理会降低代码的可移植性。我认为比媒体查询更适合这种类型的设计！好的，让我澄清一件事，它不可能得到物理屏幕大小，例如3.7英寸的嗅探仍然不是完全可能的，显示以像素为单位，没有其他东西，就操作系统而言，它并不真正知道屏幕大小，只知道驱动程序的大小，如果没有根设备/越狱设备，就没有应用程序访问驱动程序，然后愚蠢地限制用户，因为没有浏览器会这样做，所以你的要求是不可能的，因为你对答案的回答是否定的，尝试一下，但三星galaxy tab 3的报告显示，当它实际为7英寸时，它为10.6666英寸。它在这里和那里工作，但我猜10英寸并不一定在所有设备上都是10英寸。根据我的测试，在尝试了这一点并阅读了它不起作用的原因后，css测量单位（即一英寸）很少是一英寸，而是参考一个参考像素。支持太差了，我们把它处理掉了。这主意不错，但由于css的实现，我失望了。我同意，当我尝试这一方法时，我很幸运地看到了我面前的最后一组设备，但特别是对于较新的手机和高dpi屏幕，这是非常不准确的。我会删除答案，但它可能会对某些人有用。