CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Maria Piaredryj
Maria Piaredryj

Reputation: 1662

How to consider most mobile screens using @media?

I make an app using Cordova and met some difficulties with css trying to make it look equal on most mobile screens.

Somewhere along the line I understood that I began to write @media query for every test device (XIAOMI Redmi Note 3, XIAOMI Redmi 3S, Huawei ATH-UL01, Huawei KII-L21).

First issue is that

@media screen and (device-width: 360px) and (min-device-height: 540px) and (-webkit-device-pixel-ratio: 3) {
}

is good for XIAOMI Redmi Note 3 but bad for Huawei ATH-UL01 although their features (device-width: 360px and pixel-ratio) are equal! Maybe there is something else, that I didn't describe in @media?

Second issue is that it is not right way in my opinion to write @media for every device. What is the right way to make an app look good on most devices? What is good practice?

font-size and line-height mostly look different on different screens. How to avoid it? Maybe I should use em? Now I'm using px.

Upvotes: 3

Views: 1933

Answers (1)

samanime
samanime

Reputation: 26537

Short answer: just target the width and treat everything the same.

With mobile devices, things will look a little different. You specifically mentioned font-size and line-height. Those will look different because the physical dpi (dots per inch) or ppi (pixels per inch) vary.

This is made a little more confusing because mobile devices (especially those with very high dpi) have simulated ppi when it comes to a mobile device. An iPhone may have 1000px across, but presents to a browser as if it has about 640px. And these don't necessarily correspond to physical dimensions of the device.

That means on one phone, 16px might be 1/4" in the real world, whereas on another it might be 1/6" or 1/2".

All this basically means you'll never get things looking exactly the same. Your best approach is to just target the width of the devices, and look at a few devices simultaneously and find something that is 'good enough'. Then, for any outliers, you can target them more specifically to fix little things.

You'll drive yourself mad if you try to make every device look identical. It just isn't possible.

Upvotes: 3

Related Questions