11

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.

Esaevian
  • 1,707
  • 5
  • 18
  • 30
  • Ok let me clear one thing up it's impossible to get the Physical Screen Size E.G 3.7 inch sniffing is not still not perfectly possible, Display works in Pixels nothing else, in terms of the OS it dose not truly know the screen size only the driver dose and there is no application access to drivers without a Rooted/Jailbroken device and then your limiting users stupidly as such no browser will ever do it so what your asking for is not possible by the responses you have given to the answers – Barkermn01 Sep 12 '13 at 11:51

6 Answers6

6

You can use CSS:

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

@media screen and (max-width:960px) {
  /* bigger screens */
}
Naftali
  • 144,921
  • 39
  • 244
  • 303
  • 3
    How does this get me the physical size? The iPhone has a small screen, yet it would fall under the "bigger screens" in your CSS. – Esaevian Jul 01 '13 at 16:32
  • 2
    @Neal He's right - size and resolution are not related any more. My phone has a 4.7" screen but a higher resolution than my desktop PC. – Reinstate Monica Cellio Jul 01 '13 at 16:38
  • @Neal I would have to return to update "max-width" every time a new device comes out that has a higher ppi than before. – Esaevian Jul 01 '13 at 16:44
  • 2
    @Esaevian css pixels are only loosely related to screen pixels. The value in a media query will be lower the smaller a screen is even if the resolution is the same, which means that you can use it to handle different screen sizes. – Razor Jun 02 '14 at 20:30
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...

Kris Erickson
  • 33,454
  • 26
  • 120
  • 175
  • Nice answer, tried it out, but samsung galaxy tab 3 reports as 10.6666 inches when it really is 7. – dalore May 13 '14 at 14:37
  • It works here and there, but I guess 10in is not necessarily 10in on all devices. – Kris Erickson Jun 02 '14 at 20:21
  • From my testing, after trying this and reading up why it didn't work, a css unit of measurement (i.e. an inch) rarely is ever an inch, but instead is referenced to a reference pixel. http://www.w3.org/TR/css3-values/#absolute-lengths The support was so bad that we got rid of this. Nice idea though but let down due to css implementations. – dalore Jun 03 '14 at 06:45
  • Agree, I had good luck with last collection of devices infront of me when I tried this, but especially with newer phones and high dpi screens this is wildly inaccurate. I would delete the answer, but it might prove useful to someone. – Kris Erickson Jun 03 '14 at 14:31
1

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

Community
  • 1
  • 1
s3lph
  • 4,575
  • 4
  • 21
  • 38
  • Is there a way to target this in jQuery? The elements I need to resize are created dynamically, and not linked to a class. – Esaevian Jul 01 '13 at 16:36
  • http://stackoverflow.com/questions/8472566/how-do-i-get-css-mediaqueries-to-work-with-jquery-window-innerwidth Maybe this can help you. – s3lph Jul 01 '13 at 16:39
  • Hm...Chrome on the desktop is responding to the "handheld" query: jsfiddle.net/WNKpj/ EDIT: Wait nevermind. My mistake. – Esaevian Jul 01 '13 at 16:48
  • Hm, now it looks like the iPhone isn't responding to "handheld"...back to the drawing board. – Esaevian Jul 01 '13 at 16:53
  • matchMedia doesn't return a booelan, but a MediaQueryList. Use `window.matchMedia("handheld").matches` instead. – s3lph Jul 01 '13 at 16:53
  • right I just updated the fiddle. Now the iPhone isn't responding to handheld. http://www.jsfiddle.net/WNKpj/3/ – Esaevian Jul 01 '13 at 16:54
  • That's because some smartphones say, they're "screen", not "handheld" http://stackoverflow.com/questions/3893342/do-iphone-android-browsers-support-css-media-handheld Try it here: http://jsfiddle.net/7Bcdc/1/ It doesn't seem to have any reliable way of determining whether you're using a handheld or screen device. – s3lph Jul 01 '13 at 17:11
  • There must be a way to detect it, however. There are a number of sites that will either use different css rules or switch you over to a mobile site based on your screen size. – Esaevian Jul 01 '13 at 20:23
  • Maybe you could use PHP and get it via $_SERVER['HTTP_USER_AGENT']. There are some predefined functions like this: http://code.google.com/p/php-mobile-detect/ and forward to a subsite made for mobile devices – s3lph Jul 01 '13 at 20:39
  • See my edit. It works perfectly on ecery device. Combine it w/ my previous comment and it will work. – s3lph Jul 03 '13 at 06:19
0

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

pixelbyaj
  • 1,178
  • 1
  • 9
  • 22
  • 2
    -1 From my question: "How can I do this (say for screen sizes smaller than 5 inches) without using terribly unreliable browser sniffing?" – Esaevian Jul 02 '13 at 22:07
  • 2
    Regardless of the limitations of browser sniffing, this conditional would return true for *all* Android devices, including IPTV boxes running Android on HDTVs. Additionally, there are many new user agents about to hit the market, including FirefoxOS. Relying on the user agent reduces the portability of your code. – Michael McTiernan Oct 07 '13 at 20:24
  • I think than media query is best for this type of designing! – pixelbyaj Oct 08 '13 at 17:32
0

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

SeanMC
  • 1,960
  • 1
  • 22
  • 33
-1

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

Barkermn01
  • 6,781
  • 33
  • 83