3
sjwsjwsjw
15d

I'm retarded and never learned or was taught how to CSS

What's the simple toggle/config/property to throw onto things in CSS so different rendering engines will render things to look the same?

I just want 1 line of text, an input text box and a button on a web page opened by an app, to look roughly the same on iPhone, android phone and tablet.

Why the fuck did historically shit get fucked up so we have different rendering engines. I just want my fucking 1.5 em/rem to be legibly readable on these different platforms.

https://xkcd.com/927/

https://webaim.org/blog/...

an extra special fuck you shout out to apple

time to go down the rabbit hole of who knows what, i dont fucking know what a fucking viewport is yet

Comments
  • 1
    I know who to call @uyouthe
  • 2
    @AleCx04 uyouthe is dead, he is kiki now
  • 2
    @theabbie ah didn't know if that!
  • 3
    @kiki do yo thang
  • 2
    set the base font-size like this

    :root { font-size: 16px }

    then use rems
  • 0
    A good place to start if you wanna avoid unique browser-styles and get more consistent results is to use a css-reset. Just grab one of those from github and include it.
  • 0
    There are several unique interpretations of how INPUT elements should be handled.

    Which is only natural because phones have different keyboard inputs than desktops.

    But there’s also some excessive custom styling done by browser/OS manufacturers to make controls look more native. Or to ”help users”

    For example if your base font is less than 16px, ios will zoom in on inputs when they are in focus 😬 it probably helps in some cases but as devs we sometimes wanna prevent that
  • 0
    This viewport nonsense fixed it, idk why

    <meta name="viewport" content="width=device-width, initial-scale=1">
Add Comment