jQuery 如何检测手机浏览器的屏幕尺寸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17409317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect mobile browser for screen size?
提问by Esaevian
I'm working on a site that needs to work on desktop and mobile. Right now I have a main content div that is set to 70% of the screen width. However, I feel that this is to small for mobile devices (like phones, not so much tablets) and want to up it to 90 or 95% How can I do this (say for screen sizes smaller than 5 inches) without using terribly unreliable browser sniffing? I hear the mantra "feature detection feature detection feature detection" over and over, and I understand why that's a good thing...but I don't know what "feature" to detect for this problem...
我在一个需要在桌面和移动设备上工作的网站上工作。现在我有一个设置为屏幕宽度的 70% 的主要内容 div。但是，我觉得这对于移动设备（例如手机，而不是平板电脑）来说太小了，并且希望将其提高到 90% 或 95% 我怎么能做到这一点（例如对于小于 5 英寸的屏幕尺寸）而不使用非常不可靠的浏览器嗅探？我一遍又一遍地听到口头禅“特征检测特征检测特征检测”，我明白为什么这是一件好事……但我不知道要检测这个问题的“特征”是什么……
Thanks.
谢谢。
回答by Naftali aka Neal
You can use CSS:
您可以使用 CSS：
@media screen and (max-width:500px) {
/* smaller screens */
}
@media screen and (max-width:960px) {
/* bigger screens */
}
回答by Kris Erickson
You can get a wild approximation of the screen size with a bit of javascript
您可以使用一些 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;
}
See the following fiddles for its use in action vanillajs, or jquery..
请参阅以下小提琴以了解其在操作vanillajs或jquery..
jQuery version:
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;
}
As has been pointed out in the comments this technique can be wildly inaccurate so I wouldn't use it as anything other than a hint toward screen size...
正如评论中指出的那样，这种技术可能非常不准确，所以除了提示屏幕尺寸外，我不会将它用作任何其他东西......
回答by s3lph
You could use CSS:
你可以使用 CSS：
/*Here goes the CSS for all screens*/
@media handheld {
/*Here goes the CSS for mobile phones and tablets*/
}
EDIT:
编辑：
Another suggestion:
另一个建议：
set the viewportmetatag in your html:
viewport在您的 html 中设置元标记：
<meta name="viewport" content="width=device-width, height=device-height" />
now you can get the dimensions like this: Get the browser viewport dimensions with JavaScript
现在你可以得到这样的尺寸：使用 JavaScript 获取浏览器视口尺寸
回答by pixelbyaj
Instead of using jquery you can use simple javascript to detect it:
您可以使用简单的 javascript 来检测它，而不是使用 jquery：
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
}
or you can combine them both to make it more accessible through jQuery...
或者您可以将它们结合起来以使其更易于通过 jQuery 访问...
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));
now $.browser will return "device" for all above devices
现在 $.browser 将为上述所有设备返回“设备”
回答by SeanMC
these days you can probably use the Screen API. screen.height or screen.width
这些天你可能可以使用 Screen API。screen.height 或 screen.width
https://www.w3schools.com/jsref/obj_screen.asp
https://www.w3schools.com/jsref/obj_screen.asp
回答by Barkermn01
to get physical size you could not use Javascript but use jQuery to get screen size
要获得物理尺寸，您不能使用 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();
});
This will get you the Pixel size of the screen. however i would combine this with a mobile check like @Abhi jQuery answer and you would need to drop this code into a window resize event handler so if the mobile screen rotation is on and is turned you have the new mesurements
这将为您提供屏幕的像素大小。但是我会将它与像@Abhi jQuery answer 这样的移动检查结合起来，您需要将此代码放入窗口调整大小事件处理程序中，因此如果移动屏幕旋转已打开并已打开，您将获得新的测量结果
