如何检测手机浏览器的屏幕尺寸？

Question

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...

Thanks.

Answer 1

You can use CSS:

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

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

Answer 2

You can get a wild approximation of the screen size with a bit of 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 ..

jQuery version:

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...

Answer 3

You could use CSS:

/*Here goes the CSS for all screens*/

@media handheld {

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

}

EDIT :

Another suggestion:

set the viewport metatag in your 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

Answer 4

Instead of using jquery you can use simple javascript to detect it:

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

}

or you can combine them both to make it more accessible through jQuery...

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

now $.browser will return "device" for all above devices

Answer 5

these days you can probably use the Screen API. screen.height or screen.width

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

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

Answer 6

to get physical size you could not use Javascript but use jQuery to get screen size

$(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