Search code examples
phphtmlmobiletabletresponsive-design

PHP: deliver content specific to "media query reported screen width"

Premise

Working on a website that delivers content based on the device it's beeing viewed on. Essentially there are 2 versions of the site:

  1. PC & Tablet version
  2. Mobile Phone version

the "PC & Tablet version" delivers higher quality images and a different site navigation method (imagine google maps without zoom).

the mobile version restricts this "map" to a vertical scroll.

both versions have meta viewport set to width=device-width, initial-scale=1.0, user-scalable=no.

The problem

Some tablets have a really poor reported device resolution. Example: The Samsung Galaxy Tab 7" reports a device width 663px in a media query. While the "PC & Tablet version" requires a minimum width of 960px.

It really just is a big phone.

Media queries alone aren't enough to adapt the site. The site needs to be fixed width because of it's map like nature.

Solution would be to deliver the "Phone version" to these tablets. But this needs to be done on serverside.

ATM I'm using PHP Mobile Detect. It would be possible to manually add the "big phone tablets" to the "phone" list. Painfull, and I don't find anywhere a list of the "css reported" screen resolutions of tablets.

Is there somewhere such a list? Or is there even a maintained php library that let's me query the screen size on serverside (based on reported UserAgent)?

I could also check the screen size on clientside and, if necessary, correct and override the server's choice. But I'd like to avoid this.

PS: Yes. I know that this isn't the politically correct way of responsive design, I had no choice.

Solution

  • Here are a few web services which maintain mobile device lists:

    And some guidelines:

    References