CODEWITHSUNDEEP
jquery-mobilewebscreen
Alain
Alain

Reputation: 1470

Simple window size in jquery mobile

I am using JQM with HTML5 boiler plate. My objective (for tests purposes) is to have in a desktop browser, an overall div that will show me the expected size areas of my app on a real device. In a desktop browser, however, the width compared to the iphone4 browser width layout do not seems to match. I do not wish to change the viewport meta definition, although I suspect that it is my problem. Can somebody explain to me:

Why the size of a div of size 640 x 960 px (with a border of 1 px and a position of absolute) does not reflect the same size area appearance on the actual device with this type of setup ?

Regards.

Upvotes: 0

Views: 333

Answers (2)

Alain
Alain

Reputation: 1470

As an add-on,

When dealing with CSS Media queries there is a difference between the

  • device-width and the
  • width.

For the iphone4, for instance, although the resolution

  • (width x height) is equal to (640 x 960),

the device is actually presenting

  • (device-width x device-height) as equal to (320 x 480)

From here we observe that each CSS pixel is handled by 2 screen resolution pixel. This is the consequence of the 2 different size.

This help: Pixel density for different devices

Upvotes: 0

Jasper
Jasper

Reputation: 76003

Just use Chrome's Developer Tools. You can choose to spoof your User Agent as well as the device metrics for different devices.

When in Chrome:

  1. Press F12.
  2. Click on the gear icon to the bottom right (settings).
  3. Click on the Overrides tab.
  4. Here you can choose to change your User Agent string or override the viewport of your browser to match specific devices (like the iPhone). If you change the User Agent string to mimic an iPhone then the Device Metrics should auto adjust to be the proper size for the same device.

Note that you must keep the Chrome Developer Tools open, as soon as you close them you lose the UA spoofing and Device Metrics spoofing as well.

To directly answer your question, different screens have different pixel densities, so a screen with higher pixel density will show the same number of pixels in a smaller physical area.

Upvotes: 1

Related Questions