如何检测移动浏览器的屏幕大小

How to detect mobile browser for screen size?

本文关键字：浏览器 屏幕 移动 何检测 检测      更新时间：2023-09-26

我正在开发一个需要在桌面和移动设备上工作的网站。现在我有一个主内容div，它被设置为屏幕宽度的70%。然而，我觉得这对移动设备来说太小了（比如手机，而不是平板电脑），我想把它提高到90%或95%。我怎么能做到这一点（比如屏幕尺寸小于5英寸）而不使用非常不可靠的浏览器嗅探？我一次又一次地听到"特征检测特征检测"这句口头禅，我明白为什么这是一件好事。。。但我不知道这个问题的"特征"是什么。。。

谢谢。

您可以使用CSS:

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

您可以使用一点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;
}

有关它在操作vanillajs或jquery中的使用，请参阅以下技巧。。

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;
}

正如评论中所指出的，这种技术可能非常不准确，所以我不会把它当作屏幕大小的提示。。。

您可以使用CSS:

/*Here goes the CSS for all screens*/
@media handheld {
    /*Here goes the CSS for mobile phones and tablets*/
}

编辑：

另一个建议：

在html:中设置viewport元标签

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

现在您可以获得这样的尺寸：使用JavaScript 获取浏览器视口尺寸

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

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()));

现在$.brower将为上述所有设备返回"设备"

现在，您可能可以使用Screen API。screen.height或screen.width

https://www.w3schools.com/jsref/obj_screen.asp

https://caniuse.com/#feat=mdn-api_screen

要获得物理大小，您不能使用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这样的移动检查答案相结合，您需要将此代码放入窗口大小调整事件处理程序中，这样，如果移动屏幕旋转打开并打开，您就有了新的测量

相关文章：