-6

I want to make a website design relative to a phone's screen width and height. I do that like this:

@media screen and (max-width: ...) and (max-height: ...) {...}

I want to get the numbers as perfect as possible, so if anyone knows what resolution a phone has, or any other device for that matter, please let me know.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
EssemCSH
  • 103
  • 1
  • 2
  • 13
  • One option is to just use percentages. width: 100%; and height:100%; – yoursweater Aug 24 '17 at 16:10
  • 3
    Mobile devices come in many different sizes and resolutions. My Galaxy S8+ supports six or seven different screen resolutions. There is no *one size for all*. Have you never seen more than one tablet or phone? There are literally hundreds of possibilities; we're certainly not going to build you a list of all of them here. – Ken White Aug 24 '17 at 16:12
  • 3
    I'm voting to close this question as off-topic because the premise of the question is impossible. – ceejayoz Aug 24 '17 at 16:13
  • (you can begin with:) Choose 1 or 2 (horizontal) breakpoints that'll create 2 or 3 ranges of horizontal resolutions. Don't even think about the height except for (games and) the length of content you're making your users scroll through (that's a topic for the UX/webdesigner) EDIT: narrower is the device, taller is the page so height isn't relative to a phone's viewport – FelipeAls Aug 24 '17 at 16:25

2 Answers2

4

Every phone is different. There is no standard.

To that end, your media queries should be designed with breakpoints in mind, not exact dimensions, to accommodate a wide range of devices in each of several categories. How exactly you do this is beyond the scope of this question, and too broad to be remotely adequately covered in a Stack Overflow Q&A.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

You won't be able to target all phones with just one media query. I usually start using percentages and making it flexible from a width of 480 or lower. Higher than that I want some control and have multiple media set up.

Alin
  • 1,218
  • 5
  • 21
  • 47