Physical definition of screen size based on user agent in PHP / javascript

Question

Thus, there are ways to detect “mobile” browsers and screen sizes using javascript and php .. however, the screen size is always returned in pixels, and mobile can mean something these days.

I want to be able to find out how large the device’s display is, when it’s mobile, that tablets are everywhere. The reason for this is because I want to select a stylesheet for devices with small screens and by default use a regular stylesheet for everything else. For example, I want an iPad, Kindle Fire, hp touchpad, etc., to display a regular style sheet, but I need another style sheet for mobile phones or any device that has a display the size of a human hand.

Now I assume that something does not exist, but maybe someone was thinking of a better way or know about the database somewhere, where there are sizes for screen sizes somewhere .. hmm

.. maybe there is a way to find the pixel density, and then apply the width / height of the screen in pixels to this.

Answer 1

I really think this is a very good question. The unsatisfactory situation right now is that on 10-inch tablets, by default you get gigantic space traffic with a single column “mobile” site when the desktop version would be great.

Unfortunately, as John Hunt found out, even WURFL does not give an exact physical screen size.

One half-circle is the heuristic, which assumes that if the size of x or y is less than 768 pixels, then you are on the phone (*) and thus use the default "mobile" version of your site by default.

You should always allow the visitor to choose between a mobile or a desktop. Better yet, just call it the “single column” or “thin width” version of your site to avoid misuse.

(*) Why 768 pixels? Because all 10 "tablets of any importance have at least 1024x768 or 1280x800, while even phones with large screens such as the iPhone 5 or HTC HD5 have a width of less than 768 pixels (iPhone 5-640x1136, HTC HD5 1280x720). This, probably won't work on gigantic samsung screens, but on these devices, when the desktop version running by default is not so annoying.

Answer 2

When using wordpress, the wp_is_mobile function has the same problem as the "mobile" flag for tablets and phones. My problem is that I want the phones to receive a limited page without the image slider at the top of the page in order to speed up the loading / rendering of the site. Tablets usually have faster Wi-Fi access than 3G, or significantly slower than 4g Wi-Fi.

Corresponding Wordpress theme, Customizr, I use twitter bootstrap autoload, but still works too slow on phones with large image pages. Therefore, the question for my site is not only the screen size or resolution, but also the speed of data and screen output.

Rocco Aliberti in this forum on the themesandco website made a useful suggestion combining a browser detection plugin that sets the is_tablet function and then combines it with the built-in wordpp_is_mobile wordpress function to get the “wp_is_mobile () & &! Is_tablet ()” -eg device mobile and not a tablet. http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

Answer 3

http://wurfl.sourceforge.net/nphp/

It looks like you can get this information from the WURFL API..cool!

Answer 4

The correct answer. I believe that it uses a flexible approach to the layout, since you will never get it correctly for all different devices (there are 100 new ones every day.)

Answer 5

You can use frameworks like Bootstrap that show / hide columns or data based on screen resolution. This works well as it only applies to display.

But ideally, you would also like your scripting language to know about it, so that it does not process or execute certain data that will not be displayed at startup.

The browser does not currently provide screen resolution. Which should be included, as modern websites should respond, at least to popular mobile devices, tablets and computers.

This is my wish list for future versions of the HTTP / W3c / Browser implementation.

Answer 6

you can check the screen size using javascript innerWidth gives / returns the width of the device, regardless of whether you are on the desktop or on mobile phones, you can use a user agent with this javascript innerWidth code more than a filter.

after which you can apply css based on screen size.