2fe6d7a10c
TL;DR: scale down UI for non-mobile devices. I pulled the screen resolution for my phone, the Google Pixel 4, off of the internet. I created a device profile in Chrome to develop this application specifically for my phone. To my surprise, when I opened the app on my phone, many of elements that looked good in Google Chrome, looked askew on my phone. I needed to troubleshoot. Here's how I did that: I used Tailwind to responsively color the bg for each breakpoint to see if my device was sm, md, lg, xl (according to Tailwind's breakpoint terminology). After reading Tailwind's documentation and comparing their breakpoints with my Pixel 4's width (i.e. 1080px), I figured that my device would be lg. It's not; it's md, which I confirmed by using ngrok to load localhost:8000 on my phone and see that the background-color was "md:bg-green-600". I'm still unsure why my device is not lg, but knowing that my device was md was enough to fix many of the styling issues. My current theory is that while my screen's resolution is 1080 wide, the pixel density affects the media query for the breakpoint. |
||
|---|---|---|
| .. | ||
| blog | ||
| days-of-week-habits | ||
| goals | ||
| habitgarden | ||
| habits | ||
| learn | ||
| sandbox | ||
| default.nix | ||
| index.html | ||
| README.md | ||
wpcarro.dev
https://wpcarro.dev is my personal website. I expose a few subdomains, one of which you are probably visiting right now, git.wpcarro.dev. Here are some of the others:
blog.wpcarro.dev: My personal bloglearn.wpcarro.dev: Teaching others to codesandbox.wpcarro.dev: Where I deploy some pet projects and code sketches
Visit https://wpcarro.dev for a sitemap.