Determine the resolution of iPhone and Android smartphones

Both safari mobile and Android browsers on the iPhone are based on the WebKit kernel.

In the past two days, I thought that the website needed a version for smartphone resolution, so I began to study the relevant materials.

In the previous two articles, I wrote about how to use useragent to determine the device type and browser kernel, and how to determine which iPhone or android browsers are used through these articles, but even the browsers of the same device have different resolutions. How can this problem be solved?

The first thing that comes to mind is to use JS detection (screen. Width * screen. Height). It turns out that there is a problem:

1. Safari mobile on iPhone 4 turned out to be 320*480! If the first three generations were normal, the iPhone 4 would be 640*960.

2. the android browser determines that the result is 800, instead of 480, which is based on the webpage content.

3. for opera for Android, the value is 480.

4. Firefox for Android can also be determined to be 480

The problem should be caused by WebKit.

Searching for a solution ......