Is there a premade code for cell phone screen sizes?

Is there a premade code for cell phone screen sizes?
0

#1

…is that a ridiculous question?


#2

@theLAhearts CSS Bootstrap comes to mind. CSS Flexbox and CSS Grid also. Do you have a specific problem you’re working on?


#3

Want to make an application accessible via QR code for media Marketing jobs…playing around with the idea as a test to myself


#4

You can use max-width and min-width style rules for the body element in your stylesheet. Another way is setting rules for @media.


#5

@theLAhearts Are you asking how to link your site to a QR code?


#6

Mainly screen dimensions


#7

OK, the above responses by @pprovi and myself are as close to ‘premade code that will manage screen dimensions’ as I can think of. Maybe others have more ideas.


#8

On mobile devices, it’s not advisable to design for a specific hard-coded screen size or use fixed pixel margin, position, height, width, or size values. Because there are so many screen sizes and aspect ratio for mobile, and then you have the ability to rotate landscape or portrait mode.

But If you use percentage widths, % sizes, em sizes, along with max-width and min-width properties, the site you create will almost certainly work and be usable on any mobile device screen size.


#9

The number of possible widths is kinda insane: https://mydevice.io/devices/

But you can Google around quite easily for some best practices since this is a thoroughly solved problem :slight_smile:

Bootstrap is a framework that gives you easy access to common device widths by referring to some standard sizes such as sm, m, l etc…their defaults are pretty sensible.

If you go down the custom media query route, you still want only one or two alternatives, so pick the smallest common width as your worst case scenario and work from there.