You went full on with a nice web page and domain name hack.
Add more devices (e.g. ipads etc.), video res (vga,etc.) and more mathematical constants like golden ratio, silver ratio , etc. and add an easy landscape/portrait toggle switch.
> Add more devices (e.g. ipads etc.), video res (vga,etc.) and more mathematical constants like golden ratio, silver ratio , etc. and add an easy landscape/portrait toggle switch.
I'd like to add: a specs dialog, maybe? Add DPI/HDPI info, recommended DPI for images, etc. Would make this a for-sure go-to.
w := 1900
h := 1200
divisor := gcd(w, h)
aspect := fmt.Sprintf("%d:%d", w/divisor, h/divisor)
func gcd(x, y int64) int64 {
for y != 0 {
x, y = y, x%y
}
return x
}
This. I work in media. Just passed this along to a few designer friends, and even non-designers who work with magazine design teams and regularly have to translate images and resize/crop them for mobile and web.
edit: They're already happy to have it in their back pocket.
Yeah, this is really more of a reference and a tool when you’re comparing sizes and confirming they are the same aspect ratio without having to use code. There’s also an NPM module that will do the code part if you need to go that route.
I just looked at Responsive Design Mode in Firefox Developer Tools and they also have a list of 16 devices with resolutions (Chrome has 29). There is a lot of overlap in the two lists, but using those would tie into a common tool we use to view sites on different devices.
Yeah, probably doesn't. I just found myself using it across a couple different projects and seemed like it would be easier than having to copy and paste it everywhere.
Also, it has a command line tool that you can use to get the aspect ratio from width/height. So, not just the code.
What’s the use case for the CSS code? The `padding-top` value doesn’t account for the OS and browser’s chrome (status bar, URL bar, etc.), so the `.inner` element doesn’t fit into the viewport.
But why are the aspect ratios based on popular smartphone screens? Notice how on the website, you select a smartphone model, and then the button on the right shows CSS code for creating an aspect ratio that matches that smartphone’s screen. What’s the use case of having an element whose aspect ratio mimics that of popular smartphone screens?
If you happen to have a product video in your site that has been formatted for a specific phone, you can make sure the container of the video is set as the same aspect ratio of the phone.
I also see the CSS as an add-on, the devices for me are more for reference, but I have used the CSS here and there for some of the Apple phones.
I tend to look up aspect ratios frequently.
You went full on with a nice web page and domain name hack.
Add more devices (e.g. ipads etc.), video res (vga,etc.) and more mathematical constants like golden ratio, silver ratio , etc. and add an easy landscape/portrait toggle switch.