mardi 31 octobre 2017

Web responsive for phone

I'm developing a website, and after I finished the template I made it responsive for any screen size. It took me two or three days but it works, and right now it looks great in any computer and with any browser size, so for PC is completely responsive.

The problem is that in my phone it doesn't look good. Things are different, for example, some paddings are avoided (or very small, I don't know), or things aren't in the same exact position. I already have this line in the header:

<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1">

But it doesn't help very much. Sorry, I can't show you pictures because I'm working in it in my company and I don't think I should.

Another thing that could be important is that, for most of measures (paddings, margins, font-size) I've used % or vw, not pixels nor em. I did this because the distances and sizes match better, for example if the font-size is in vw (viewport-width) instead of px or em, when the viewport is bigger the text font is bigger, when the browser is smaller, the text is smaller. Which is exactly what I want in my case.

The thing is that this technique has served me very well for pc and saved me a lot of time, so I don't want to change back to px or em, I'd prefer to stay with %, but the web doesn't look good in my phone and I don't know why, while I've achieved it to look great in any computer and browser size.

Oh, and just if it helps: both in PC and phone (android) I use chrome as browser.

Oh, and I'm also using media queries, for the sizes set by bootstrap (xs, sm, md and lg). I have 5 css: - stlye.css: just for colors, borders and so - style-lg.css, style-md.css, style-sm.css, stlye-xs.css, for % and vw (measures)

style.css is loaded always, while the rest is loaded depending on the size of the screen, which in phone will be style-xs.css.

And I've also tried to give the browser the same size as my phone. My phone's resolution is 1280x720. I've set that size in the browser and it looks fine (in pc)




Aucun commentaire:

Enregistrer un commentaire