9

I've been doing some research and I think I know the answer already, but I'm wondering if there's any means by which you can get a device's screen size and pixel density without the use of javascript or relying on CSS3 media queries.

Essentially, I'm looking into what it would take to get the screen resolution and pixel density so that the server could decide which image to server in a URI request.

So far I've not found anything that says this is even possible but I thought hey, why not ask?

dougoftheabaci
  • 665
  • 1
  • 6
  • 19

6 Answers6

12

I don't agree entirely with the above correct answer. Realistically this answer is correct in many cases...but theoretically it is not. Often requests made to a web server contain a User-Agent field which could, in theory, be used to discern information about device screen resolutions and properties.

Web requests do not pass through the client first. They pass to the server, which then serves a page to the client so the server gets the request first...Ruby on Rails, for example, receives a request through an action controller to a resource and then serves a page to the response.

Look at an example UA parser such as : https://github.com/visionmedia/user-agent

A sample user agent being sent by my computer is:

  User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11 (KHTML, like  enter code here`Gecko) Chrome/17.0.963.83 Safari/535.11

I think it is eminently possible to make a good guess what my screen resolution (DPI etc) is given that information via a server. You would, of course, need a table of device information to reference.

For mobile devices it gets even easier. If the User-Agent is a mobile safari for iPad:

  Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML,   like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

You can know with strong certainty what the screen resolution is on the server. You can even know the height and width of the browser with that info. I suspect the same is true with many mobile devices such as Android or Win Mo.

So in summation, I agree its impractical to do this but I also disagree.

I believe Facebook has undertaken a major project cataloging devices and screen resolutions and made it open source because they faced similar issues when creating the facebook mobile app e.g. they had to catalog all the discrepancies between all mobile browser renderers so they could tailor the client app to every individual case. Perhaps that project might have the necessary information to do this...in theory.

Delete
  • 922
  • 8
  • 12
  • 1
    So you're running OSX on any of what, 3-4 MBPs, and two desktops with an arbitrary monitor size? And it's not much easier on mobile devices unless you're running an iOS device. Meh. – Dave Newton Nov 12 '12 at 19:05
  • (And my caveat about iOS devices no longer holds true given the plethora of resolutions now available.) – Dave Newton Aug 07 '19 at 13:38
4

Ruby runs on the server side--without getting info from the client, it has no way of knowing any client capabilities.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
  • That's what I thought. I'm trying to think of loopholes now. – dougoftheabaci Sep 29 '11 at 12:35
  • 1
    I'm not sure there are any--unless the client tells you, I don't see how, and that'd mean getting some info via JavaScript (probably). You *may* be able to glean a *tiny* amount of info via the user agent, but that's basically useless. – Dave Newton Sep 29 '11 at 12:37
  • Comments regarding downvotes are appreciated, especially on correct answers. Determining screen size and density necessarily relies on client information, this is indisputable. Getting *accurate* information is frought with difficulty – Dave Newton Oct 20 '17 at 15:45
2

For something that's impossible it looks like Mobvious does a decent job:

Mobvious detects whether your app / website is being accessed by a phone, or by a tablet, or by a personal computer. You can then use this information throughout your app. (E.g. fork your front-end code with regard to device type. There is a plugin for Ruby on Rails that helps you with this.)

https://github.com/jistr/mobvious

Undistraction
  • 42,754
  • 56
  • 195
  • 331
1

I had the same problem and solved it using a getter and a setter route for the window height. If the $height variabale is 0 the get_heigt.erb is served, otherwise the index.erb This is a one user app, so I use a global variable, with different users you would have to keep that info in cookies. Here the code that matters.

Controller:

get "/" do
  if $height == 0
    erb :get_height
  else
    erb :index
  end
end

get "/get_height" do
  erb :get_height
end

get "/set_height" do
  $height = params[:height]
  redirect "/"
end

get_height.erb

<script type="text/javascript">
  function send_message(message) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      document.location.reload(true);
    }
    xhttp.open("GET", "http://localhost:4567/" + message + "?height=" + window.innerHeight, true);
    xhttp.send();
  }

  send_message('set_height');
</script>
peter
  • 41,770
  • 5
  • 64
  • 108
0

You could use Ahoy. The current_visit method contains the following information.

When someone visits your website, Ahoy creates a visit with lots of useful information.

traffic source - referrer, referring domain, landing page, search
keyword location - country, region, and city technology - browser, OS, and device type
utm parameters - source, medium, term, content, campaign

kartikluke
  • 2,375
  • 1
  • 19
  • 32
0

Not sure how realistic would be to build but you could build a database which maps specific device types you can get from user agent in server-side into know screen sizes. It still would not allow things like window size.

Kimmo Hintikka
  • 13,472
  • 7
  • 34
  • 63